song detail page is ready

web/src/components/ui/BlackDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="black-dialog">
+    <el-dialog
+        v-model="showDialog"
+        style="--el-dialog-bg-color:#414141;
+        --el-text-color-primary:#f1f1f1;
+        --el-border-color:#414141;
+        --el-color-primary:#21aa93;
+        --el-color-primary-dark-2:#41555d;
+        --el-color-white: #e1e1e1;
+        --el-color-primary-light-3:#549688;
+        --el-fill-color-blank:#616161;
+         --el-color-primary-light-7:#717171;
+        --el-color-primary-light-9:#717171;
+        --el-text-color-regular:#e1e1e1"
+        :title="title"
+        :width="width"
+        :before-close="cancel"
+    >
+      <div class="dialog-body">
+        <slot></slot>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancel">{{cancelText}}</el-button>
+          <el-button type="primary" @click="$emit('confirm')">{{confirmText}}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+import {ref, watch} from "vue";
+const props = defineProps({
+  show : Boolean,
+  title: {
+    type: String,
+    default: 'Tips',
+  },
+  width: {
+    type: Number,
+    default: 500,
+  },
+  confirmText: {
+    type: String,
+    default: '确定',
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+});
+const emits = defineEmits(['confirm','cancal']);
+const showDialog = ref(props.show)
+
+watch(() => props.show, (newValue) => {
+  showDialog.value = newValue
+})
+const cancel = () => {
+  showDialog.value = false
+  emits('cancal')
+}
+</script>
+
+<style lang="stylus">
+.black-dialog {
+  .dialog-body {
+    .form {
+      .form-item {
+        display flex
+        flex-flow column
+        font-family: "Neue Montreal";
+        padding 10px 0
+
+        .label {
+          margin-bottom 0.6rem
+          margin-inline-end 0.75rem
+          color #ffffff
+          font-size 1rem
+          font-weight 500
+        }
+
+        .input {
+          display flex
+          padding 10px
+          text-align left
+          font-size 1rem
+          background none
+          border-radius 0.375rem
+          border 1px solid #8f8f8f
+          outline: none;
+          transition: border-color 0.5s ease, box-shadow 0.5s ease;
+
+          &:focus {
+            border-color: #0F7A71;
+            box-shadow: 0 0 5px #0F7A71;
+          }
+        }
+      }
+    }
+  }
+}
+
+</style>

web/src/components/ui/BlackSwitch.vue

@@ -6,20 +6,19 @@
 
 </template>
 
-<script>
-export default {
-  name: 'BlackSwitch',
-  props: {
-    value : Boolean,
-    size: {
-      type: String,
-      default: 'default',
-    }
-  },
-  data() {
-    return {
-      model: this.value
-    }
+<script setup>
+
+import {ref, watch} from "vue";
+const props = defineProps({
+  value : Boolean,
+  size: {
+    type: String,
+    default: 'default',
   }
-}
+});
+const model = ref(props.value)
+
+watch(() => props.value, (newValue) => {
+  model.value = newValue
+})
 </script>