Skip to content

V
vue3-quasar-ts-study01
Commit f792895a authored by hcyhuchaoyue's avatar hcyhuchaoyue
Browse files
Options

feat:一言

parent 4fda92ed
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 6100 additions and 5038 deletions
CHANGELOG.md
View file @ f792895a
## 2022-12-25
- 一言
## 2022-12-02 ## 2022-12-02
- swiper 学习 - swiper 学习
......
quasar.config.js
View file @ f792895a
...@@ -108,7 +108,7 @@ module.exports = configure(function (ctx) { ...@@ -108,7 +108,7 @@ module.exports = configure(function (ctx) {
// directives: [], // directives: [],
// Quasar plugins // Quasar plugins
plugins: ['Notify', 'Dialog'], plugins: ['Notify', 'Dialog', 'AppFullscreen'],
}, },
// animations: 'all', // --- includes all animations // animations: 'all', // --- includes all animations
......
quasar.extensions.json 0 → 100644
View file @ f792895a
{
"@quasar/qmediaplayer": {}
}
\ No newline at end of file
src/App.vue
View file @ f792895a
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import 'swiper/css'; import 'swiper/css';
import '@quasar/quasar-ui-qmediaplayer/src/index.sass';
export default defineComponent({ export default defineComponent({
name: 'App', name: 'App',
......
src/common/utils/myCloneDeep.ts
View file @ f792895a
...@@ -7,7 +7,7 @@ export const objCloneDeep = function (data: any) { ...@@ -7,7 +7,7 @@ export const objCloneDeep = function (data: any) {
for (const key in data) { for (const key in data) {
const item = data[key]; const item = data[key];
const typeofs = Object.prototype.toString.call(item); const typeofs = Object.prototype.toString.call(item);
console.log(typeofs, item); // console.log(typeofs, item);
// 如果是对象 // 如果是对象
if (typeofs === '[object Object]') { if (typeofs === '[object Object]') {
......
src/css/quasar.variables.scss
View file @ f792895a
...@@ -25,9 +25,9 @@ $accent: #9c27b0; ...@@ -25,9 +25,9 @@ $accent: #9c27b0;
$dark: #1d1d1d; $dark: #1d1d1d;
$positive: #5bb318; $positive: #8bc24c;
$negative: #d2001a; $negative: #d2001a;
$info: #ff8787; $info: #a696c8;
$warning: #ffb200; $warning: #ffb200;
$--color-white: #fff; $--color-white: #fff;
...@@ -52,7 +52,7 @@ $primary-bg-light: rgba(120, 192, 168, 0.136); ...@@ -52,7 +52,7 @@ $primary-bg-light: rgba(120, 192, 168, 0.136);
$border-color: rgba(0, 0, 0, 0.12); $border-color: rgba(0, 0, 0, 0.12);
$gray-text: #000000de; $gray-text: rgba(0, 0, 0, 0.871);
$gray-light-text: #00000098; $gray-light-text: rgba(0, 0, 0, 0.596);
$header-heigyht: 50px; $header-heigyht: 50px;
src/layouts/MainLayout.vue
View file @ f792895a
...@@ -174,10 +174,17 @@ export default defineComponent({ ...@@ -174,10 +174,17 @@ export default defineComponent({
{ {
title: '九', title: '九',
caption: '动画2', caption: '动画2',
icon: require('./menuListIcons/page8.svg'), icon: require('./menuListIcons/page9.svg'),
link: '/page9', link: '/page9',
active: false, active: false,
}, },
{
title: '十',
caption: '设计',
icon: require('./menuListIcons/page10.svg'),
link: '/page10',
active: false,
},
]; ];
for (const item of lists) { for (const item of lists) {
......
src/layouts/menuListIcons/page10.svg 0 → 100644
View file @ f792895a
<?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 0 → 100644
View file @ f792895a
<?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 0 → 100644
View file @ f792895a
<!--
* 设计
-->
<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/config.ts 0 → 100644
View file @ f792895a
This diff is collapsed.
src/modules/page10/element/MyPoems.vue 0 → 100644
View file @ f792895a
<!--
* 设计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
View file @ f792895a
...@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [ ...@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [
path: '', path: '',
name: 'LaoutIndexPage', name: 'LaoutIndexPage',
component: () => import('pages/IndexPage.vue'), component: () => import('pages/IndexPage.vue'),
redirect: '/page9', redirect: '/page10',
children: [ children: [
{ {
path: 'page1', path: 'page1',
...@@ -102,6 +102,16 @@ const routes: RouteRecordRaw[] = [ ...@@ -102,6 +102,16 @@ const routes: RouteRecordRaw[] = [
keepalive: true, keepalive: true,
}, },
}, },
{
path: 'page10',
name: 'PAGE10',
component: () => import('../modules/page10/IndexPage.vue'),
meta: {
title: '设计',
permission: ['*'],
keepalive: true,
},
},
], ],
}, },
], ],
......
yarn.lock
View file @ f792895a
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment