工具栏编写

src/assets/index.scss

@@ -15,3 +15,8 @@ body {
    width: 0;
    height: 0;
 }
+
+/* vant 主题 */
+:root {
+   --van-blue: #1fa1ff !important;
+}

src/libs/rem.ts

@@ -1,7 +1,7 @@
 export const baseWidth = 1920 // 设计图宽度
 export const baseSize = 18 //  rem 比例
 export let size = baseSize
-const minWidth = 680 //  最小缩放比例
+const minWidth = 884 //  最小缩放比例
 const doc = document.documentElement
 function refreshRem() {
    const width = doc.getBoundingClientRect().width

src/registerComponents.ts

@@ -1,3 +1,4 @@
 import { type App } from "vue"
 
+import "vant/lib/index.css"
 export default (app: App<Element>) => {}

src/views/rhythm/components/operatingTools/index.ts

@@ -0,0 +1,2 @@
+import operatingTools from "./operatingTools.vue"
+export default operatingTools

src/views/rhythm/components/operatingTools/operatingTools.vue

@@ -0,0 +1,200 @@
+<!--
+* @FileDescription: 操作工具
+* @Date:2025-01-06 10:07:36
+-->
+<template>
+   <div class="backBtn"></div>
+   <div class="editBtn"></div>
+   <div class="desBtn"></div>
+   <div class="operatingTools">
+      <div class="playBtn"></div>
+      <div class="progressBox">
+         <div class="progressTools">
+            <div class="title">
+               <notice-bar text="飞向遥远的天空.mp3" />
+            </div>
+            <div class="time">02:32/3:28</div>
+         </div>
+         <div class="progressCon">
+            <Progress :percentage="50" />
+         </div>
+      </div>
+      <div class="musicBtn"></div>
+      <div class="speedBtn">
+         <div class="speed">120</div>
+         <div class="unit">BPM</div>
+      </div>
+      <div class="convertBtn"></div>
+      <div class="listBtn"></div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { Progress, NoticeBar } from "vant"
+</script>
+
+<style lang="scss" scoped>
+.backBtn,
+.editBtn,
+.desBtn {
+   position: absolute;
+   width: 68px;
+   height: 68px;
+   cursor: pointer;
+   &:hover,
+   &:active {
+      opacity: 0.8;
+   }
+}
+.backBtn {
+   left: 50px;
+   bottom: 42px;
+   background: url("./imgs/backBtn.png") no-repeat;
+   background-size: 100% 100%;
+}
+.editBtn {
+   right: 138px;
+   bottom: 42px;
+   background: url("./imgs/editBtn.png") no-repeat;
+   background-size: 100% 100%;
+}
+.desBtn {
+   right: 50px;
+   bottom: 42px;
+   background: url("./imgs/desBtn.png") no-repeat;
+   background-size: 100% 100%;
+}
+.operatingTools {
+   position: absolute;
+   bottom: 30px;
+   left: 50%;
+   transform: translateX(-50%);
+   width: 850px;
+   height: 92px;
+   background: rgba(0, 122, 196, 0.15);
+   border-radius: 45px;
+   border: 2px solid #ffffff;
+   padding: 0 16px;
+   display: flex;
+   align-items: center;
+   .playBtn {
+      width: 68px;
+      height: 68px;
+      background: url("./imgs/playBtn.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+      &:hover,
+      &:active {
+         opacity: 0.8;
+      }
+   }
+   .progressBox {
+      margin-left: 16px;
+      width: 378px;
+      .progressTools {
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         .title {
+            flex-grow: 1;
+            margin-right: 20px;
+            :deep(.van-notice-bar) {
+               font-weight: 600;
+               font-size: 18px;
+               color: #000000;
+               line-height: 24px;
+               height: 24px;
+               background: transparent;
+            }
+         }
+         .time {
+            flex-shrink: 0;
+            font-weight: 400;
+            font-size: 16px;
+            color: rgba(0, 0, 0, 0.5);
+            line-height: 22px;
+         }
+      }
+      .progressCon {
+         margin-top: 15px;
+         :deep(.van-progress) {
+            height: 6px;
+            background: #8bb7cf;
+            border-radius: 3px;
+            .van-progress__pivot {
+               width: 16px;
+               height: 16px;
+               background: #ffffff;
+               box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.22);
+               border-radius: 50%;
+               min-width: initial;
+               color: rgba(255, 255, 255, 0);
+            }
+         }
+      }
+   }
+   .musicBtn {
+      margin-left: 37px;
+      width: 54px;
+      height: 54px;
+      background: url("./imgs/musice.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+      &:hover,
+      &:active {
+         opacity: 0.8;
+      }
+   }
+   .speedBtn {
+      margin-left: 34px;
+      width: 54px;
+      height: 54px;
+      background: url("./imgs/speedBtn.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      &:hover,
+      &:active {
+         opacity: 0.8;
+      }
+      .speed {
+         font-weight: 600;
+         font-size: 20px;
+         color: #ffffff;
+      }
+      .unit {
+         margin-top: 3px;
+         font-weight: 600;
+         font-size: 12px;
+         color: rgba(255, 255, 255, 0.7);
+      }
+   }
+   .convertBtn {
+      margin-left: 34px;
+      width: 54px;
+      height: 54px;
+      background: url("./imgs/convert.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+      &:hover,
+      &:active {
+         opacity: 0.8;
+      }
+   }
+   .listBtn {
+      margin-left: 34px;
+      width: 54px;
+      height: 54px;
+      background: url("./imgs/listBtn.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+      &:hover,
+      &:active {
+         opacity: 0.8;
+      }
+   }
+}
+</style>

src/views/rhythm/rhythm.vue

@@ -6,6 +6,7 @@
             <!-- <numberedTone :measuresData="measuresData" /> -->
          </div>
       </div>
+      <operatingTools/>
    </div>
 </template>
 
@@ -15,6 +16,7 @@ import numberedTone from "./components/numberedTone"
 import axios from "axios"
 import { parseMusicXML, type measuresType } from "./tools/formatXml"
 import { ref } from "vue"
+import operatingTools from "./components/operatingTools"
 
 const measuresData = ref<measuresType[]>([])