UPDATE

src/App.vue

@@ -3,7 +3,15 @@ export default {
   data() {
     return {
       txtDate: '',
-      result: ''
+      result: '',
+      txtStart: '',
+      txtInterval: '',
+      txtLastInterval: '',
+      resultList: '',
+      txtCount: '',
+      txtRestInterval: '',
+      txtRestIdx: '',
+      txtIntervalRest: ''
     }
   },
   methods: {
@@ -19,28 +27,116 @@ export default {
             this.result += '<p>' + `<span style="font-weight: 600; color: green;width: 120px; display:inline-block;margin-right: 16px;">${dateStr}</span>${parseFloat((end-start)/1000/60)}分钟` + '</p>'
         }
       }
+    },
+    getSchedule() {
+      const result = ''
+      let dateTime = ''
+      if (this.txtStart.trim().length > 0 && this.txtInterval.trim().length > 0 && this.txtCount.trim().length > 0) {
+        const interval = parseInt(this.txtInterval) * 60 * 1000
+        dateTime = new Date(`2023-03-01 ${this.txtStart}`).getTime()
+        for (let index = 1; index <= parseInt(this.txtCount); index++) {
+          const curDate = new Date(dateTime)
+          result += `<p>${curDate.getHours()}:${curDate.getMinutes()}</p>`
+          if (this.txtRestIdx.trim().length > 0 && parseInt(this.txtRestIdx) === idx) {
+            const restTime = parseFloat(this.txtRestInterval) * 60 * 60 * 1000
+            date += restTime
+          } else {
+            date += interval
+          }      
+        }
+      } else {
+        this.resultList = '';
+        return false
+      }
+      if(this.txtLastInterval.length > 0) {
+        const lastInterval = parseInt(this.txtLastInterval) * 60 * 1000
+      }
+      this.resultList = result;
     }
   }
 }
 </script>
 
 <template>
-  <header>
-    <div class="wrapper">
-      <h1>时间间隔计算器</h1>
-    </div>
-  </header>
-
-  <main>
-    <textarea cols="30" rows="10" v-model="txtDate"></textarea>
-    <div>
-      <button @click="getTime">计算</button>
-    </div>
-    <br>
-    <p>输入结果：</p>
-    <div class="result" v-html="result"></div>
-  </main>
+  <section class="bg-01">
+    <header>
+      <div class="wrapper">
+        <h1>时间间隔计算器</h1>
+      </div>
+    </header>
+    <main>
+      <textarea cols="30" rows="10" v-model="txtDate"></textarea>
+      <div>
+        <button @click="getTime">计算</button>
+      </div>
+      <br>
+      <p>输入结果：</p>
+      <div class="result" v-html="result"></div>
+    </main>
+  </section>
+  <section class="bg-02">
+    <header class="mt16">
+      <div class="wrapper">
+        <h1>时间排序计算器</h1>
+      </div>
+    </header>
+    <main>
+      <div class="txt-box">
+        <label for="txtStart">起始时间：</label>
+        <input v-model="txtStart" type="text" name="" id="txtStart">（必填项，24小时制）
+      </div>
+      <div class="txt-box">
+        <label for="txtCount">总计场次：</label>
+        <input v-model="txtCount" type="text" name="" id="txtCount">（必填项，不含压轴）
+      </div>
+      <div class="txt-box">
+        <label for="txtInterval">演出时长：</label>
+        <input v-model="txtInterval" type="text" name="" id="txtInterval">（必填项，分钟）
+      </div>
+      <div class="txt-box">
+        <label for="txtRestIdx">分割场次：</label>
+        <input v-model="txtRestIdx" type="text" name="" id="txtRestIdx">（第几场后休息）
+      </div>
+      <div class="txt-box">
+        <label for="txtRestInterval">分割间隙：</label>
+        <input v-model="txtRestInterval" type="text" name="" id="txtRestInterval">（小时）
+      </div>
+      <div class="txt-box">
+        <label for="txtIntervalRest">演出间歇：</label>
+        <input v-model="txtIntervalRest" type="text" name="" id="txtIntervalRest">（分钟）
+      </div>
+      <div class="txt-box">
+        <label for="txtLastInterval">压轴间隔：</label>
+        <input v-model="txtLastInterval" type="text" name="" id="txtLastInterval">（分钟）
+      </div>
+      <div>
+        <button @click="getTime">计算</button>
+      </div>
+      <br>
+      <p>输入结果：</p>
+      <div class="result" v-html="resultList"></div>
+    </main>
+  </section>
 </template>
 
 <style scoped>
+header, main {
+  grid-column-start: 1;
+ grid-column-end: 4;
+}
+section {
+  padding: 16px;
+}
+.result {
+  padding: 16px;
+  background-color: #fff;
+  border: 1px solid #000;
+}
+section.bg-01 {
+  background-color: #d0e4a8;
+}
+section.bg-02{
+  background-color: #f5f5d5;
+}
+
 </style>

src/assets/main.css

 @import "./base.css";
 
 #app {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
-
   font-weight: normal;
 }
 
@@ -33,3 +30,7 @@ a,
     padding: 0 2rem;
   }
 }
+
+.mt16 {
+  margin-top: 16px;
+}