feat:一言

CHANGELOG.md

+## 2022-12-25
+
+- 一言
+
 ## 2022-12-02
 
 - swiper 学习

package.json

@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@quasar/app-webpack": "^3.0.0",
+    "@quasar/quasar-app-extension-qmediaplayer": "^2.0.0-beta.6",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",

quasar.config.js

@@ -108,7 +108,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['Notify', 'Dialog'],
+      plugins: ['Notify', 'Dialog', 'AppFullscreen'],
     },
 
     // animations: 'all', // --- includes all animations

quasar.extensions.json

+{
+  "@quasar/qmediaplayer": {}
+}
\ No newline at end of file

src/App.vue

@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import 'swiper/css';
+import '@quasar/quasar-ui-qmediaplayer/src/index.sass';
 
 export default defineComponent({
   name: 'App',

src/common/utils/myCloneDeep.ts

@@ -7,7 +7,7 @@ export const objCloneDeep = function (data: any) {
   for (const key in data) {
     const item = data[key];
     const typeofs = Object.prototype.toString.call(item);
-    console.log(typeofs, item);
+    // console.log(typeofs, item);
 
     // 如果是对象
     if (typeofs === '[object Object]') {

src/css/quasar.variables.scss

@@ -25,9 +25,9 @@ $accent: #9c27b0;
 
 $dark: #1d1d1d;
 
-$positive: #5bb318;
+$positive: #8bc24c;
 $negative: #d2001a;
-$info: #ff8787;
+$info: #a696c8;
 $warning: #ffb200;
 
 $--color-white: #fff;
@@ -52,7 +52,7 @@ $primary-bg-light: rgba(120, 192, 168, 0.136);
 
 $border-color: rgba(0, 0, 0, 0.12);
 
-$gray-text: #000000de;
-$gray-light-text: #00000098;
+$gray-text: rgba(0, 0, 0, 0.871);
+$gray-light-text: rgba(0, 0, 0, 0.596);
 
 $header-heigyht: 50px;

src/layouts/MainLayout.vue

@@ -174,10 +174,17 @@ export default defineComponent({
         {
           title: '九',
           caption: '动画2',
-          icon: require('./menuListIcons/page8.svg'),
+          icon: require('./menuListIcons/page9.svg'),
           link: '/page9',
           active: false,
         },
+        {
+          title: '十',
+          caption: '设计',
+          icon: require('./menuListIcons/page10.svg'),
+          link: '/page10',
+          active: false,
+        },
       ];
 
       for (const item of lists) {

src/layouts/menuListIcons/page10.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671862325332" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M266.214404 245.465646l31.099141-16.285455 118.861428 227.548445-31.099141 16.253461z" fill="#3E4347" p-id="4985"></path><path d="M149.944571 0l-114.862053 366.182784L516.15935 114.862053z" fill="#8CC63E" p-id="4986"></path><path d="M149.944571 0l-21.43665 317.358413 294.194032-153.671989z" fill="#E9EFF4" p-id="4987"></path><path d="M149.944571 0l75.092267 266.934292 101.136197-52.823747z" fill="#8CC63E" p-id="4988"></path><path d="M577.045837 449.625746a17.59725 17.59725 0 0 1-8.286706-23.420341l144.745384-303.216622a85.106702 85.106702 0 0 1 96.464927-45.880831l165.542134 40.121731a17.59725 17.59725 0 0 1 12.925981 21.212685 17.72523 17.72523 0 0 1-21.180691 12.925981l-165.542134-40.121731a49.784221 49.784221 0 0 0-56.535166 26.907795l-144.745384 303.216623a17.565255 17.565255 0 0 1-23.388345 8.25471z" fill="#65B1EF" p-id="4989"></path><path d="M166.677957 389.859085a397.76185 397.76185 0 0 0-75.860147 233.78747c0 221.021465 179.172004 400.161475 400.161474 400.161475S891.140759 844.668021 891.140759 623.646555c0-87.378347-28.315576-167.973754-75.860147-233.78747H166.677957z" fill="#89664C" p-id="4990"></path><path d="M891.012779 623.74254c0 221.085455-179.172004 400.25746-399.93751 400.25746-97.584752 0-186.530855-34.874551-255.960006-92.465552 16.95735 1.9197 34.234651 2.87955 51.831902 2.87955 271.317607 0 491.123262-216.606155 491.123261-484.084362 0-20.4768-1.2798-40.633651-3.8394-60.470551h40.953601c47.672551 65.909702 75.828152 146.537104 75.828152 233.883455z" fill="#7A5B44" p-id="4991"></path><path d="M814.384752 389.859085a60.086611 60.086611 0 0 0-59.766661-55.031402c-17.40528 0-32.986846 7.48683-43.993126 19.292986-11.00628-11.806155-26.587846-19.292985-43.993126-19.292986s-32.986846 7.48683-43.993126 19.292986a59.958631 59.958631 0 0 0-43.993126-19.292986c-17.40528 0-32.986846 7.48683-43.993126 19.292986a59.958631 59.958631 0 0 0-43.993127-19.292986c-17.40528 0-32.986846 7.48683-43.993126 19.292986a59.958631 59.958631 0 0 0-43.993126-19.292986c-17.40528 0-32.986846 7.48683-43.993126 19.292986a59.958631 59.958631 0 0 0-43.993126-19.292986c-17.40528 0-32.986846 7.48683-43.993126 19.292986a59.958631 59.958631 0 0 0-43.993126-19.292986 60.150601 60.150601 0 0 0-59.798656 55.031402h647.48283z" fill="#D3D9DD" p-id="4992"></path><path d="M667.815654 389.859085H166.677957a397.76185 397.76185 0 0 0-18.365131 439.6753c24.988096 4.511295 50.552101 7.326855 76.788002 7.326855 241.210311 0 437.019716-199.200875 442.714826-447.002155z" fill="#FFFFFF" opacity=".1" p-id="4993"></path><path d="M339.418966 615.071895c-43.513201 43.513201-104.943603 52.151851-137.258554 19.836901s-23.356351-93.745352 19.836901-137.258554c43.513201-43.193251 104.943603-52.151851 137.258553-19.8369 32.314951 32.346946 23.356351 93.745352-19.8369 137.258553z" fill="#FFFFFF" opacity=".1" p-id="4994"></path></svg>
\ No newline at end of file

src/layouts/menuListIcons/page9.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671862384603" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5132" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512m-511.232 0a511.232 511.232 0 1 0 1022.464 0 511.232 511.232 0 1 0-1022.464 0Z" fill="#65B1EF" p-id="5133"></path><path d="M263.552 940.992l-0.32 0.512c0.768 0.192 1.504 0.448 2.272 0.608l-1.952-1.12zM231.392 220.448l-1.024-2.08c8.544-1.28 9.12-7.296 15.616-9.504 7.392-2.432 4.864 0.224 12.128 0 5.888-0.256 9.472 4.032 16.192 0.896a23.136 23.136 0 0 1-6.944 6.816c-5.536 3.936-11.2 7.968-17.792 9.504-6.592 1.504-14.336-0.096-18.176-5.632z" fill="#E9EFF4" p-id="5134"></path><path d="M333.664 676.128c-0.128 4.512-2.784 8.448-5.088 12.256a124.32 124.32 0 0 0-17.888 55.872c-1.376 18.848-0.544 42.08-16.96 51.36-9.376 5.216-22.56 4.288-28.8 13.088-1.952 2.656-2.88 6.016-3.808 9.152l-12.128 44.064a636.736 636.736 0 0 1-15.712-1.6c6.144 1.952 10.4 10.272 6.72 15.968-5.888-3.104-13.632 0.576-16.896 6.496-3.104 5.888-2.656 13.056-0.928 19.552 5.344 19.2 21.76 34.688 41.088 39.296-3.36 6.368-13.632 3.584-19.904-0.672a238.208 238.208 0 0 1-93.984-128.192c-5.44-18.272-8.928-37.696-19.584-53.408-8.896-13.28-22.336-23.008-31.232-36.288-12.48-19.072-14.816-43.808-29.28-61.248-8.096-9.952-20.608-22.176-13.44-32.832 2.88-4.384 9.024-8.544 6.592-13.184-0.8-1.504-2.432-2.432-3.712-3.712-4.864-5.216-1.504-13.408 0.928-20.128 4.032-11.68 4.032-24.16 2.304-36.64-12.16-10.88-21.76-24.384-27.776-39.552-3.584-9.248-8.352-20.8-18.272-20.928l-7.776-21.504c-0.928 2.56-3.456 4.16-6.24 4.512a508.32 508.32 0 0 1 128.416-305.824c1.632-0.704 3.232-1.632 4.864-2.56 17.44-10.176 31.328-25.44 48.192-36.544 3.456-2.304 7.392-4.512 11.68-4.064 4.16 0.352 8.096 4.608 6.592 8.544a8.864 8.864 0 0 1-3.36 3.936c-19.744 16.8-41.376 31.488-64.384 43.648-2.752 1.376-5.664 3.008-6.912 5.792-2.336 4.736 1.6 10.624 6.592 12.352 4.96 1.728 10.528 0.704 15.616-0.448a25.216 25.216 0 0 0-3.36 21.504c4.736 0.448 6.24-6.016 7.648-10.528 5.76-17.92 34.336-25.216 32.48-44.096 7.744 4.032 15.616-4.992 20.352-12.384 4.736-7.52 15.264-14.912 21.056-8.32 0.32 3.68 0.768 7.392 1.12 11.104l30.656-7.776a15.264 15.264 0 0 0-4.416 18.976 15.296 15.296 0 0 0 18.272 6.816c-0.096 5.44-4.96 9.6-9.376 12.832-11.2 8.448-23.232 17.12-36.288 21.28l3.008 6.24a2.848 2.848 0 0 1-1.024 0.256c-8.32 0.8-17.12-5.184-26.016-4.032-5.44 0.704-12.128 0.704-15.264 6.24-0.448 0.704-2.4 10.4-1.024 9.6l14.464-8.32a23.68 23.68 0 0 1 1.024 12.608 28.288 28.288 0 0 1 17.248 3.808c-5.44 12.608-19.424 21.056-33.184 20l-0.48-12.48c-11.328-0.928-20.576 8.8-26.24 18.528-5.76 9.824-10.144 21.056-19.648 27.296-5.76 3.936-12.832 5.44-19.072 8.672-6.112 3.36-11.776 9.728-10.496 16.544 0.576 3.232 2.656 6.24 2.56 9.6-0.352 6.24-7.616 9.152-12.48 13.184-8.32 6.944-10.4 19.68-19.296 25.792-6.464 4.512-15.04 4.416-22.56 6.72-7.52 2.304-15.04 9.824-12 17.12-3.712 1.28-8.224-1.504-8.576-5.44a253.76 253.76 0 0 0-25.632 83.744c6.592 4.608 13.28-5.92 14.56-13.888 1.376-7.968 8.32-18.4 14.784-13.664l-4.48 34.24c-0.352 2.208-0.576 4.512 0.48 6.464 1.28 2.432 4.032 3.456 6.144 5.184 5.888 5.088 5.088 14.112 5.44 21.856 0.352 9.472 3.488 18.72 8.448 26.816-0.48-1.632-0.8-3.232-1.152-4.864 9.024 1.152 18.4-1.76 25.216-7.776 3.584-3.232 6.592-7.392 11.104-9.024 4.64-1.728 9.728-0.48 14.464 0.8 14.688 4.032 30.304 8.544 40.128 20.096 4.96 5.888 8.096 13.312 14.016 18.144 13.408 11.328 36.096 6.336 48.352 18.944 9.824 10.176 8 26.592 5.344 40.576-6.72-3.68-15.712 5.568-11.776 12.16 3.584-3.936 7.744-8.096 12.96-8.096 5.312-0.128 9.952 7.168 6.016 10.528 9.248-11.808 31.904-6.944 35.488 7.744 12.96 0.928 26.016 1.824 38.976 2.88-2.496 19.008 37.312 20.128 36.512 39.232zM254.848 141.12a10.336 10.336 0 0 1-13.728-5.568 10.304 10.304 0 0 1 7.104-12.992c3.424-0.8 8.192-0.416 9.248-3.776 0.32-1.024 0.128-2.144 0.128-3.2-0.128-6.336 5.536-11.584 11.648-13.184 6.112-1.568 12.576-0.352 18.784 0.864a23.296 23.296 0 0 1 1.792 14.848l-12.768 0.544c0.384 7.072-0.32 15.968-6.88 18.592-5.888 2.336-13.568-2.016-18.464 1.952M321.12 70.496c11.616-5.568 21.44-14.336 32.896-20.224 19.712-10.112 42.72-11.008 64.864-11.712l151.2-4.704-35.072 19.232c-9.536 5.248-20.384 10.624-30.848 7.648a16.384 16.384 0 0 0 15.872 16.16c-20.704 12.8-49.44-0.288-71.296 10.464-9.152 4.512-16.544 13.024-26.624 14.624-5.824 0.928-11.872-0.64-17.664 0.64-9.696 2.112-15.808 11.296-22.976 18.144-8.256 7.904-20.384 13.312-31.168 9.536-10.784-3.776-16.416-19.808-7.776-27.296 4.256-3.68 10.336-4.288 15.36-6.88 5.024-2.56 8.992-9.44 5.216-13.632-1.632-1.824-4.32-2.528-5.824-4.48-1.632-2.112-1.472-5.12-2.816-7.424-5.12-8.992-19.36 3.104-29.056-0.512M474.176 113.024c6.816-1.568 12.736-5.6 19.104-8.544s13.952-4.672 20.192-1.568c1.856 4.64-3.488 8.864-8.192 10.528a57.28 57.28 0 0 1-28.256 2.464M886.24 163.872a16.288 16.288 0 0 1-5.792-0.352c-8.672-1.856-15.264-8.544-22.688-13.408a60.288 60.288 0 0 0-58.976-3.552c4.384-6.368 6.592-14.24 6.112-21.984l-2.656 0.928c-30.304-17.568-65.824-35.808-98.88-24-7.648 2.784-14.56 6.944-22.304 9.6-8.224 2.88-17.344 4.064-24.384 9.152-7.168 5.088-10.976 16.32-4.832 22.432 5.216 5.216 13.536 3.808 20.832 4.512 7.168 0.704 15.392 7.84 11.456 13.984-31.68 14.816-63.456 29.76-95.136 44.704 14.56 4.736 24.192 21.248 21.056 36.288-10.656 1.856-20.928-4.608-31.68-5.312-15.616-0.8-30.528 12.96-30.848 28.576-0.448 15.616 13.888 30.048 29.504 29.824 11.68-0.128 23.136-7.168 34.464-4.192 0.448-10.656 7.744-19.68 15.232-27.296 14.56-14.592 35.36-27.776 54.816-20.608 6.368 2.304 11.808 6.592 17.12 10.848 11.68 9.248 23.36 18.592 35.072 27.968 3.712-3.808 7.392-7.648 11.104-11.328l19.2 20.224c3.232-2.208 6.592-4.288 9.824-6.496 2.304 6.016 4.736 11.904 7.072 17.92 0.928-6.592 1.728-13.056 2.528-19.552 7.648 0.224 15.744 0.448 22.656-3.008 6.944-3.36 12.032-11.68 9.12-18.848-1.504-3.808-5.088-6.816-5.792-10.88-1.504-8.096 10.048-13.632 17.568-9.952 7.392 3.584 11.104 12.032 14.24 19.776 1.728-7.872 3.328-15.616 5.088-23.488 7.232 19.008 17.664 36.8 30.624 52.416a125.92 125.92 0 0 0-70.88 7.2c7.072 9.952 19.2 15.84 31.36 15.36 5.44-0.128 11.456-1.376 15.616 2.08 3.136 2.656 3.936 6.944 4.512 10.88 1.856 11.104 3.712 22.08 5.44 33.056-12.512-10.272-30.528-9.12-46.848-9.44-16.32-0.448-35.392-4.96-41.408-20.096a32.704 32.704 0 0 0-7.488 27.424c-16.896-4.032-36.32-10.496-41.184-27.168-13.184 4.864-29.6-3.552-33.184-17.088-1.28-4.736-1.632-10.528-5.792-13.056-2.528-1.504-5.792-1.28-8.8-0.928-25.088 2.912-50.08 5.696-75.04 8.608-13.632 1.632-27.744 3.264-39.776 9.952-12.032 6.592-21.6 19.552-20.224 33.216a155.936 155.936 0 0 0-55.712 56.704c-4.16 7.168-7.744 15.392-6.112 23.488 1.152 6.24 5.312 11.552 6.592 17.696 2.208 10.528-3.808 20.704-6.336 31.104-7.168 29.6 15.296 57.472 36.128 79.872 9.824 10.4 21.184 21.728 35.52 22.304 8.896 0.352 17.344-3.584 25.664-6.848a186.144 186.144 0 0 1 75.264-12.64c-5.792 4.512 0.224 14.336 7.424 15.84 7.168 1.504 14.912-0.832 21.856 1.6 15.84 5.664 13.664 28.896 6.496 44.064l10.976-2.08-5.888 15.136c21.728 2.752 29.952 31.328 24.896 52.704-4.96 21.408-17.664 41.056-18.016 63.04-0.096 12.032 3.584 23.712 7.296 35.136l27.808 87.168c25.92 3.104 40.8-29.856 64.864-40.16 9.024-3.936 19.648-4.736 26.72-11.456 6.816-6.464 4.608-21.632-4.16-21.632a25.92 25.92 0 0 0 22.432-24.192c0.128-3.36-0.352-6.72 0.096-10.048 0.8-4.736 3.808-8.896 6.688-12.96 18.368-26.368 30.272-56.576 42.176-86.4l9.344-23.84 35.232-89.056c4.608-11.68 9.248-23.232 13.856-34.944-6.368 10.528-23.008 9.152-32.512 1.28-9.6-7.84-14.592-19.776-22.112-29.6-6.368-8.448-14.944-15.936-17.952-26.24-1.728-5.888-1.408-12.256-2.432-18.4-2.336-13.312-11.104-24.384-17.12-36.416s-9.152-27.616-0.704-38.176a1463.584 1463.584 0 0 1 66.432 130.88 28.352 28.352 0 0 1 13.76-16.32c4.736-2.56 10.048-3.584 15.04-5.664 13.184-5.792 22.304-19.776 22.304-34.112a38.08 38.08 0 0 0-22.56-33.984c-6.592-2.784-14.112-3.68-20.352-7.52-6.24-3.68-10.752-12.128-6.816-18.272 3.68-5.792 12.608-5.664 18.72-2.432 6.144 3.36 10.656 9.024 16.416 12.832 4.16 2.784 9.024 4.608 13.536 7.168 24.416 13.984 30.432 45.792 35.552 73.536 2.784 14.912 5.92 29.728 9.632 44.288 0.128-3.136 0.096-6.368 0.096-9.472a509.408 509.408 0 0 0-137.056-347.872z m46.816 168c-3.36-0.224-6.464-2.432-9.152-4.512-4.384-3.456-8.8-7.52-10.08-12.96-1.504-6.464 1.6-13.888-1.856-19.648-1.632-2.784-4.512-4.512-6.944-6.464a36.32 36.32 0 0 1-12.736-20.224c-1.504-6.944 0.672-16.192 7.744-17.344 3.36-0.576 7.04 1.28 8.544 4.384l-4.736 2.56c7.968 0.928 11.68 12.96 5.568 18.144-0.8 0.8-1.856 1.504-1.856 2.656 0 0.704 0.448 1.376 1.056 1.856 4.96 5.44 12.384 7.392 18.848 10.848 6.464 3.36 12.832 9.6 11.808 16.768l-6.112 2.304c-2.208 2.208-0.448 6.144 1.856 8.32s5.312 4.384 5.44 7.616c0 3.488-3.936 5.92-7.392 5.696zM936.384 687.648l-8.352 5.92a22.624 22.624 0 0 1-12.8 26.24c-5.216 2.112-12.16 3.04-13.92 8.384-1.472 4.544 2.048 9.152 2.528 13.888 0.768 7.872-6.592 13.76-11.904 19.616s-8.128 16.864-1.056 20.384c1.632 0.832 3.52 0.992 5.344 1.152 7.68 0.672 16.096 0.896 22.368-3.584 17.984-12.832 0.896-47.648 18.656-60.832 2.528-1.856 5.696-3.2 7.072-6.016 4.192-8.288-11.264-16.512-7.936-25.152z" fill="#E9EFF4" p-id="5135"></path></svg>
\ No newline at end of file

src/modules/page10/IndexPage.vue

+<!--
+ * 设计
+  -->
+<script lang="ts">
+export default {
+  name: 'PAGE10',
+};
+</script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { list } from './config';
+
+import { QMediaPlayer } from '@quasar/quasar-ui-qmediaplayer';
+import MyPoems from './element/MyPoems.vue';
+
+const show = ref(false);
+const name = ref('');
+const title = ref('');
+const draggingFab = ref(false);
+const btnPos = ref([18, 18]);
+// const source = ref(require('./media/江上清风游.mp3'));
+const isPlaying = ref(false);
+
+const sources = ref([
+  {
+    src: require('./media/江上清风游.mp3'),
+    type: 'audio/mp3',
+  },
+]);
+
+onMounted(() => {
+  //
+});
+
+function clickItem(data: any) {
+  name.value = data.name;
+  title.value = data.title;
+  btnPos.value = [18, 18];
+  show.value = true;
+}
+function goBack() {
+  show.value = false;
+  name.value = '';
+  title.value = '';
+}
+function moveFab(ev: any) {
+  draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;
+  btnPos.value = [btnPos.value[0] - ev.delta.x, btnPos.value[1] - ev.delta.y];
+}
+
+function onPaused() {
+  isPlaying.value = false;
+}
+function onPlaying() {
+  isPlaying.value = true;
+}
+</script>
+<template>
+  <div>
+    <div v-if="show">
+      <q-page-sticky position="bottom-right" :offset="btnPos" class="z-top">
+        <q-btn
+          :disable="draggingFab"
+          v-touch-pan.prevent.mouse="moveFab"
+          round
+          color="white"
+          text-color="primary"
+          icon="bi-arrow-left"
+          title="返回，按住可拖动"
+          @click="goBack"
+        />
+      </q-page-sticky>
+      <MyPoems v-if="name === 'MyPoems'" />
+    </div>
+    <div v-else class="q-pa-sm q-gutter-sm">
+      <q-list dense>
+        <q-item
+          clickable
+          active
+          v-for="(item, index) in list"
+          :key="index"
+          @click="clickItem(item)"
+        >
+          <q-item-section>
+            <q-item-label>{{ item.title }}</q-item-label>
+            <q-item-label caption v-if="item.remark">
+              {{ item.remark }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+      <div>
+        <!-- 
+          :source="source"
+          dense
+          loop
+          hide-volume-btn
+          no-video
+           style="
+            border-radius: 20px;
+            width: 100px;
+            min-width: 100px !important;
+            --mediaplayer-background: #cccc99;
+            --mediaplayer-background-dark: #cccc99;
+            --mediaplayer-color: #ffffff;
+            --mediaplayer-color-dark: #ffffff;
+          "
+         -->
+        <q-media-player
+          type="audio"
+          dense
+          loop
+          hide-volume-btn
+          no-video
+          :sources="sources"
+          @paused="onPaused"
+          @playing="onPlaying"
+          style="
+            border-radius: 20px;
+            width: 100px;
+            min-width: 100px !important;
+            --mediaplayer-background: #cccc99;
+            --mediaplayer-background-dark: #cccc99;
+            --mediaplayer-color: #ffffff;
+            --mediaplayer-color-dark: #ffffff;
+          "
+        >
+          <template #play>
+            <q-btn
+              round
+              flat
+              :icon="
+                isPlaying ? 'fa-solid fa-compact-disc' : 'bi-play-circle-fill'
+              "
+              :class="{ 'rotate-animate': isPlaying }"
+              style="
+                font-size: 1rem;
+                padding: 4px;
+                min-width: 40px;
+                max-width: 40px;
+                min-height: 40px;
+                max-height: 40px;
+              "
+            />
+          </template>
+
+          <!-- <template #positionSlider> </template> -->
+          <!-- <template #durationTime></template> -->
+        </q-media-player>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.rotate-animate {
+  animation: rotate 3s linear infinite;
+}
+</style>

src/modules/page10/element/MyPoems.vue

+<!--
+ * 设计1
+  -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useQuasar, copyToClipboard } from 'quasar';
+import { useMessage } from 'src/common/hooks';
+import { myCloneDeep, getRandomInt, isEmpty } from 'src/common/utils';
+import { poems } from '../config';
+import { QMediaPlayer } from '@quasar/quasar-ui-qmediaplayer';
+
+const defaultStyle = {
+  backgroundImage: 'linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)',
+  color: 'white',
+};
+
+const $q = useQuasar();
+const { info } = useMessage();
+
+// const textcolor = ref('#ffffff');
+// const getTextColor = computed(() => {
+//   return {
+//     color: 'inherit',
+//     // color: textcolor.value,
+//   };
+// });
+const source = ref(require('../media/羽肿-花火が瞬く夜に.mp3'));
+const isPlaying = ref(false);
+const carouselRef = ref<any>(null);
+const slide = ref('57');
+
+onMounted(() => {
+  // rightClick();
+});
+
+function getStyle(data: any) {
+  let obj = {} as any;
+  if (!isEmpty(data.style)) {
+    for (const key in data.style) {
+      obj[key] = data.style[key];
+    }
+  } else {
+    obj = myCloneDeep(defaultStyle);
+  }
+  return obj;
+}
+
+function leftClick(data: any) {
+  let str = '';
+  for (const item of data.content) {
+    str += item + '\r\n';
+  }
+  if (data.author) {
+    str += data.author;
+  }
+  copyToClipboard(str)
+    .then(() => {
+      info('复制成功');
+    })
+    .catch(() => {
+      // fail
+    });
+}
+
+function rightClick() {
+  const keyList = poems.map((item: any) => item.key);
+  const max = keyList.length;
+
+  getValueKey(keyList, max);
+}
+
+function getValueKey(keyList: any, max: number) {
+  const randomIndex = getRandomInt(0, max);
+  const valueKey = keyList[randomIndex];
+
+  if (valueKey === slide.value) {
+    getValueKey(keyList, max);
+  } else {
+    slide.value = valueKey;
+  }
+}
+
+function toggle() {
+  const target = carouselRef.value.$el;
+  $q.fullscreen
+    .toggle(target)
+    .then(() => {
+      // success!
+    })
+    .catch((err) => {
+      alert(err);
+      // uh, oh, error!!
+      // console.error(err)
+    });
+}
+
+function onPaused() {
+  isPlaying.value = false;
+}
+function onPlaying() {
+  isPlaying.value = true;
+}
+</script>
+<template>
+  <div class="box container-height">
+    <!-- 
+      arrows
+      navigation
+      :autoplay="8000"
+     -->
+    <q-carousel
+      v-model="slide"
+      transition-prev="fade"
+      transition-next="fade"
+      :transition-duration="1500"
+      :autoplay="8000"
+      animated
+      infinite
+      height="100%"
+      ref="carouselRef"
+    >
+      <q-carousel-slide
+        :name="item.key"
+        class="my-carousel-slide"
+        v-for="item in poems"
+        :key="item.key"
+      >
+        <div class="content" :style="getStyle(item)">
+          <section
+            title="鼠标左键复制，右键切换"
+            @click="leftClick(item)"
+            @contextmenu.prevent="rightClick()"
+          >
+            <!-- 
+              :style="getTextColor"
+             -->
+            <p v-for="(contentItem, index) in item.content" :key="index">
+              {{ contentItem }}
+            </p>
+            <p class="author" v-if="item.author">{{ item.author }}</p>
+          </section>
+        </div>
+      </q-carousel-slide>
+
+      <template v-slot:control>
+        <q-carousel-control position="top-right" :offset="[18, 18]">
+          <q-btn
+            round
+            flat
+            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
+            :title="$q.fullscreen.isActive ? '退出全屏' : '全屏'"
+            @click="toggle"
+          />
+        </q-carousel-control>
+
+        <!-- 
+          style="left: 50%; transform: translateX(-50px); width: 100px"
+         -->
+        <q-carousel-control
+          position="top"
+          :offset="[0, 18]"
+          style="left: 50%; transform: translateX(-140px); width: 280px"
+        >
+          <div>
+            <!-- 
+              autoplay
+              width: 100px;
+              min-width: 100px !important;
+              dense
+             -->
+            <q-media-player
+              class="yyyyyyyyyyyyyyy"
+              type="audio"
+              dense
+              loop
+              hide-volume-btn
+              no-video
+              :source="source"
+              style="
+                border-radius: 20px;
+                width: 280px;
+                min-width: 280px !important;
+                --mediaplayer-background: #7f8f7d;
+                --mediaplayer-background-dark: #7f8f7d;
+                --mediaplayer-color: #c8baa8;
+                --mediaplayer-color-dark: #c8baa8;
+              "
+              @paused="onPaused"
+              @playing="onPlaying"
+            >
+              <template #play>
+                <q-btn
+                  round
+                  flat
+                  :icon="
+                    isPlaying
+                      ? 'fa-solid fa-compact-disc'
+                      : 'bi-play-circle-fill'
+                  "
+                  :class="{ 'rotate-animate': isPlaying }"
+                  style="
+                    font-size: 1rem;
+                    padding: 4px;
+                    min-width: 40px;
+                    max-width: 40px;
+                    min-height: 40px;
+                    max-height: 40px;
+                  "
+                />
+              </template>
+
+              <!-- <template #positionSlider> </template> -->
+              <!-- <template #durationTime></template> -->
+            </q-media-player>
+          </div>
+        </q-carousel-control>
+      </template>
+    </q-carousel>
+  </div>
+  <!-- <div class="text z-top">
+    <q-input filled v-model="textcolor" class="my-input">
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color v-model="textcolor" />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div> -->
+</template>
+
+<style lang="scss" scoped>
+// .text {
+//   position: fixed;
+//   top: 10px;
+//   left: 10px;
+//   box-sizing: border-box;
+// }
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.box {
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.my-carousel-slide {
+  padding: 0;
+}
+.content {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-family: '华文中宋';
+  p {
+    font-size: 24px;
+  }
+  .author {
+    font-size: 15px;
+    text-align: right;
+  }
+}
+
+.rotate-animate {
+  animation: rotate 3s linear infinite;
+}
+:deep(.yyyyyyyyyyyyyyy
+    .q-media__controls
+    .q-slider
+    .q-slider__track-container
+    .q-slider__track) {
+  color: #c8baa8;
+}
+:deep(.yyyyyyyyyyyyyyy
+    .q-media__controls
+    .q-slider
+    .q-slider__track-container
+    .q-slider__track
+    .q-slider__thumb) {
+  color: #c8baa8;
+}
+</style>

src/router/routes.ts

@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [
         path: '',
         name: 'LaoutIndexPage',
         component: () => import('pages/IndexPage.vue'),
-        redirect: '/page9',
+        redirect: '/page10',
         children: [
           {
             path: 'page1',
@@ -102,6 +102,16 @@ const routes: RouteRecordRaw[] = [
               keepalive: true,
             },
           },
+          {
+            path: 'page10',
+            name: 'PAGE10',
+            component: () => import('../modules/page10/IndexPage.vue'),
+            meta: {
+              title: '设计',
+              permission: ['*'],
+              keepalive: true,
+            },
+          },
         ],
       },
     ],