修复移动端样式错乱的问题；增加音效

6565e098 · 龙菲 · e89b8681 · 6565e098 · 6565e098 · 6565e098
--- a/index.html
+++ b/index.html
@@ -3,11 +3,11 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=1050, user-scalable=no" />
+    <!-- <meta name="viewport" content="width=1050, user-scalable=no" /> -->
-    <!-- <meta
+    <meta
      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      content="width=100vw, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    /> -->
+    />
    <title>PDF阅读器</title>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.8.4",
    "element-plus": "^2.9.8",
+    "modernizr": "^3.6.0",
    "turn.js": "^1.0.5",
    "vant": "^4.9.19",
    "vue": "^3.5.13",
@@ -26,6 +27,7 @@
    "unplugin-auto-import": "^19.3.0",
    "unplugin-vue-components": "^28.7.0",
    "vite": "^6.2.4",
+    "vite-plugin-static-copy": "^3.0.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-vue-devtools": "^7.7.2"
  }

--- a/public/css/magazine.css
+++ b/public/css/magazine.css
+body {
+    overflow: hidden;
+    /* background: url('../pics/wood.png'); */
+    margin: 0;
+    padding: 0;
+}
+.back {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 55;
+    /* background: url('../pics/wood.png'); */
+    background: rgba(2, 0, 34, 0.986);
+}
+#canvas {
+    position: absolute;
+    background: url('../pics/background.jpg') repeat-x bottom center;
+}
+/*上一页*/
+.previousPage {
+    width: 33%;
+    height: 60%;
+    position: absolute;
+    bottom: 0%;
+    left: 17%;
+    z-index: 999999;
+    /* background-color: aqua; */
+    background: transparent !important;
+}
+/*下一页*/
+.nextPage {
+    width: 33%;
+    height: 60%;
+    position: absolute;
+    bottom: 0%;
+    left: 50%;
+    z-index: 999999;
+    /* background-color: aqua; */
+    background: transparent !important;
+}
+.magazine-viewport {
+    position: absolute;
+}
+.magazine-viewport .container {
+    z-index: 666;
+    position: absolute;
+    top: 54%;
+    left: 50%;
+    width: 1400px;
+    height: 781px;
+    margin: auto;
+}
+.magazine-viewport .magazine {
+    width: 1400px;
+    height: 781px;
+    left: -661px;
+    top: -300px;
+}
+.magazine-viewport .page {
+    width: 700px;
+    height: 781px;
+    background-color: white;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+.magazine-viewport .zoomer .region {
+    display: none;
+}
+.magazine .region {
+    position: absolute;
+    overflow: hidden;
+    background: #0066FF;
+    opacity: 0.2;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+    filter: alpha(opacity=20);
+}
+.magazine .region:hover {
+    opacity: 0.5;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+    filter: alpha(opacity=50);
+}
+.magazine .region.zoom {
+    opacity: 0.01;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
+    filter: alpha(opacity=1);
+}
+.magazine .region.zoom:hover {
+    opacity: 0.2;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+    filter: alpha(opacity=20);
+}
+.magazine .page {
+    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    -ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+.magazine-viewport .page img {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin: 0;
+}
+.magazine .even .gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.2)));
+    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
+    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
+    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
+    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
+    background-image: linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
+}
+.magazine .odd .gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: -webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.15)));
+    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
+    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
+    background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
+    background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
+    background-image: linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
+}
+.magazine-viewport .zoom-in .even .gradient,
+.magazine-viewport .zoom-in .odd .gradient {
+    display: none;
+}
+.magazine-viewport .loader {
+    background-image: url(../pics/loader.gif);
+    width: 22px;
+    height: 22px;
+    position: absolute;
+    top: 280px;
+    left: 219px;
+}
+.magazine-viewport .shadow {
+    -webkit-transition: -webkit-box-shadow 0.5s;
+    -moz-transition: -moz-box-shadow 0.5s;
+    -o-transition: -webkit-box-shadow 0.5s;
+    -ms-transition: -ms-box-shadow 0.5s;
+    -webkit-box-shadow: 0 0 20px #000;
+    -moz-box-shadow: 0 0 20px #000;
+    -o-box-shadow: 0 0 20px #000;
+    -ms-box-shadow: 0 0 20px #000;
+    box-shadow: 0 0 20px #000;
+}
+.next-button {
+    width: 59px;
+    height: 59px;
+    position: absolute;
+    top: 50%;
+    background: url('../pics/arrows.png') -59px 0;
+    right: 10px;
+    z-index: 10;
+}
+.previous-button {
+    width: 59px;
+    height: 59px;
+    position: absolute;
+    top: 50%;
+    background-image: url('../pics/arrows.png');
+    z-index: 10;
+}
+.magazine-viewport .previous-button-hover {
+    background-position: 0 -59px;
+    cursor: pointer;
+}
+.magazine-viewport .next-button-hover {
+    background-position: -59px -59px;
+    cursor: pointer;
+}
+.magazine-viewport .previous-button-hover,
+.magazine-viewport .previous-button-down {}
+.magazine-viewport .previous-button-down,
+.magazine-viewport .next-button-down {}
+.magazine-viewport .next-button-hover,
+.magazine-viewport .next-button-down {}
+.magazine-viewport .zoom-in .next-button,
+.magazine-viewport .zoom-in .previous-button {
+    display: none;
+}
+.animated {
+    -webkit-transition: margin-left 0.5s;
+    -moz-transition: margin-left 0.5s;
+    -ms-transition: margin-left 0.5s;
+    -o-transition: margin-left 0.5s;
+    transition: margin-left 0.5s;
+}
+.exit-message {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    z-index: 10000;
+}
+.exit-message>div {
+    width: 140px;
+    height: 30px;
+    margin: auto;
+    background: rgba(0, 0, 0, 0.5);
+    text-align: center;
+    font: 12px arial;
+    line-height: 30px;
+    color: white;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+    border-radius: 10px;
+}
+.zoom-icon {
+    position: absolute;
+    z-index: 1000;
+    width: 22px;
+    height: 22px;
+    top: 10px;
+    right: 10px;
+    background-image: url(../pics/zoom-icons.png);
+    background-size: 88px 22px;
+}
+.zoom-icon-in {
+    background-position: 0 0;
+    cursor: pointer;
+}
+.zoom-icon-in.zoom-icon-in-hover {
+    background-position: -22px 0;
+    cursor: pointer;
+}
+.zoom-icon-out {
+    background-position: -44px 0;
+}
+.zoom-icon-out.zoom-icon-out-hover {
+    background-position: -66px 0;
+    cursor: pointer;
+}
+.bottom {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
\ No newline at end of file
--- a/public/js/hash.js
+++ b/public/js/hash.js
+/**
+ * hash.js
+ *
+ * Copyright (C) 2012 Emmanuel Garcia
+ * MIT Licensed
+ *
+ * ****************************************
+ *
+ * Hash.pushState(true);
+ *
+ * Hash.on('/page/([0-9]+)$',
+ *	{yep: function(path, parts) { }, nop: function() { }},
+ *	'Page $1');
+ *
+ * Hash.go('/page/1');
+ **/
+ (function() {
+    'use strict';
+    var hashes = {},
+    regexp = {},
+    history = [],
+    freq = 100,
+    num = 0,
+    pushState = false,
+    timer = null,
+    currentUrl = null,
+    freeze = function(obj) {
+        if (Object.freeze) return Object.freeze(obj);
+        return obj;
+    },
+    getHashParts = function() {
+        return window.location.href.split('#');
+    },
+    startTimer = function() {
+        if (!timer) timer = setInterval(function() {
+            if (num > 0 && currentUrl != window.location.href) {
+                currentUrl = window.location.href;
+                window.Hash.check();
+            }
+        },
+        freq);
+    },
+    stopTimer = function() {
+        if (timer) {
+            clearInterval(timer);
+            timer = null;
+        }
+    };
+    window.Hash = freeze({
+        pushState: function(yes) {
+            if (window.history && window.history.pushState) pushState = yes;
+            return this;
+        },
+        fragment: function() {
+            var hash = getHashParts();
+            return (pushState) ? window.location.pathname + ((hash[1]) ? '#' + hash[1] : '') : hash[1] || '';
+        },
+        get: function(path, params) {
+            var p, fragment = '',
+            parameters = [];
+            for (p in params) {
+                if (!Object.prototype.hasOwnProperty(p)) continue;
+                parameters.push(encodeURIComponent(p) + '=' + encodeURIComponent(params[p]));
+            }
+            if (parameters.length > 0) parameters = '?' + parameters.join('&');
+            return (pushState) ? path + parameters: getHashParts()[0] + '#' + path + parameters;
+        },
+        go: function(hash, params) {
+            if (this.fragment() != hash) {
+                var to = this.get(hash, params);
+                if (pushState) window.history.pushState(null, document.title, to);
+                else window.location.href = to;
+            }
+            return this;
+        },
+        update: function() {
+            currentUrl = window.location.href;
+            return this;
+        },
+        on: function(hash, callback, title) {
+            if (!hashes[hash]) hashes[hash] = {
+                title: title,
+                listeners: []
+            };
+            hashes[hash].listeners.push(callback);
+            num++;
+            startTimer();
+            return this;
+        },
+        check: function() {
+            var i, hash, parts, fragment = this.fragment();
+            for (hash in hashes) {
+                if (!Object.prototype.hasOwnProperty.call(hashes, hash)) continue;
+                hashes[hash].regexp = hashes[hash].regexp || new RegExp(hash);
+                if ((parts = hashes[hash].regexp.exec(fragment))) {
+                    if (hashes[hash].title) document.title = hashes[hash].title;
+                    for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].yep) hashes[hash].listeners[i].yep(fragment, parts);
+                } else {
+                    for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].nop) hashes[hash].listeners[i].nop(fragment);
+                }
+            }
+            return this;
+        }
+    });
+})();
\ No newline at end of file
--- a/public/js/jquery.min.1.7.js
+++ b/public/js/jquery.min.1.7.js
--- a/public/js/magazine.js
+++ b/public/js/magazine.js
+/*
+ * Magazine sample
+ */
+function setArrows() {
+    setTimeout(function() {
+        var width = $(window).width();
+        var bookWidth = $(".magazine").width();
+        var arrowSize = $(".next-button").width();
+        var magaLeft = $(".magazine").offset().left;
+        var nextLeft = (width - bookWidth - magaLeft - 60) / 2;
+        //alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft);
+        $('.next-button').animate({ "right": nextLeft }, 300);
+        $('.previous-button').animate({ "left": nextLeft }, 300);
+    }, 100);
+}
+function addPage(page, book) {
+    var id, pages = book.turn('pages');
+    var element = $('<div />', {});
+    if (book.turn('addPage', element, page)) {
+        element.html('<div class="gradient"></div><div class="loader"></div>');
+        loadPage(page, element);
+    }
+}
+function loadPage(page, pageElement) {
+    pageElement.find('.loader').remove();
+    // Create an image element
+    var img = $('<img />');
+    img.mousedown(function(e) {
+        e.preventDefault();
+    });
+    img.load(function() {
+        // Set the size
+        $(this).css({
+            width: '100%',
+            height: '100%'
+        });
+        // Add the image to the page after loaded
+        $(this).appendTo(pageElement);
+        // Remove the loader indicator
+        pageElement.find('.loader').remove();
+    });
+    // Load the page
+    img.attr('src', 'book/img_' + page + '.jpg');
+}
+function zoomTo(event) {}
+function addRegion(region, pageElement) {
+    var reg = $('<div />', {
+            'class': 'region  ' + region['class']
+        }),
+        options = $('.magazine').turn('options'),
+        pageWidth = options.width / 2,
+        pageHeight = options.height;
+    reg.css({
+        top: Math.round(region.y / pageHeight * 100) + '%',
+        left: Math.round(region.x / pageWidth * 100) + '%',
+        width: Math.round(region.width / pageWidth * 100) + '%',
+        height: Math.round(region.height / pageHeight * 100) + '%'
+    }).attr('region-data', $.param(region.data || ''));
+    reg.appendTo(pageElement);
+}
+// Process click on a region
+function regionClick(event) {
+    var region = $(event.target);
+    if (region.hasClass('region')) {
+        $('.magazine-viewport').data().regionClicked = true;
+        setTimeout(function() {
+                $('.magazine-viewport').data().regionClicked = false;
+            },
+            100);
+        var regionType = $.trim(region.attr('class').replace('region', ''));
+        return processRegion(region, regionType);
+    }
+}
+// http://code.google.com/p/chromium/issues/detail?id=128488
+function isChrome() {
+    return navigator.userAgent.indexOf('Chrome') != -1;
+}
+function disableControls(page) {
+    if (page == 1) $('.previous-button').hide();
+    else $('.previous-button').show();
+    if (page == $('.magazine').turn('pages')) $('.next-button').hide();
+    else $('.next-button').show();
+}
+// Set the width and height for the viewport
+function resizeViewport() {
+    var width = $(window).width(),
+        height = $(window).height(),
+        options = $('.magazine').turn('options');
+    $('.magazine').removeClass('animated');
+    $('.magazine-viewport').css({
+        width: width,
+        height: height
+    }).zoom('resize');
+    setArrows();
+    if ($('.magazine').turn('zoom') == 1) {
+        var bound = calculateBound({
+            width: options.width,
+            height: options.height,
+            boundWidth: Math.min(options.width, width),
+            boundHeight: Math.min(options.height, height)
+        });
+        if (bound.width % 2 !== 0) bound.width -= 1;
+        if (bound.width != $('.magazine').width() || bound.height != $('.magazine').height()) {
+            $('.magazine').turn('size', bound.width, bound.height);
+            if ($('.magazine').turn('page') == 1) $('.magazine').turn('peel', 'br');
+        }
+        $('.magazine').css({
+            top: -bound.height / 2,
+            left: -bound.width / 2
+        });
+    }
+    var magazineOffset = $('.magazine').offset(),
+        boundH = height - magazineOffset.top - $('.magazine').height(),
+        marginTop = (boundH - $('.thumbnails > div').height()) / 2;
+    if (marginTop < 0) {
+        $('.thumbnails').css({
+            height: 1
+        });
+    } else {
+        $('.thumbnails').css({
+            height: boundH
+        });
+        $('.thumbnails > div').css({
+            marginTop: marginTop
+        });
+    }
+    if (magazineOffset.top < $('.made').height()) $('.made').hide();
+    else $('.made').show();
+    $('.magazine').addClass('animated');
+}
+// Number of views in a flipbook
+function numberOfViews(book) {
+    return book.turn('pages') / 2 + 1;
+}
+// Current view in a flipbook
+function getViewNumber(book, page) {
+    return parseInt((page || book.turn('page')) / 2 + 1, 10);
+}
+// Width of the flipbook when zoomed in
+function largeMagazineWidth() {
+    return 2214;
+}
+// Calculate the width and height of a square within another square
+function calculateBound(d) {
+    var bound = {
+        width: d.width,
+        height: d.height
+    };
+    if (bound.width > d.boundWidth || bound.height > d.boundHeight) {
+        var rel = bound.width / bound.height;
+        if (d.boundWidth / rel > d.boundHeight && d.boundHeight * rel <= d.boundWidth) {
+            bound.width = Math.round(d.boundHeight * rel);
+            bound.height = d.boundHeight;
+        } else {
+            bound.width = d.boundWidth;
+            bound.height = Math.round(d.boundWidth / rel);
+        }
+    }
+    return bound;
+}
\ No newline at end of file
--- a/public/js/modernizr.2.5.3.min.js
+++ b/public/js/modernizr.2.5.3.min.js
--- a/public/js/turn.html4.min.js
+++ b/public/js/turn.html4.min.js
--- a/public/js/turn.js
+++ b/public/js/turn.js
--- a/public/js/zoom.min.js
+++ b/public/js/zoom.min.js
--- a/src/assets/audio/flip.mp3
+++ b/src/assets/audio/flip.mp3
--- a/src/assets/audio/flip2.mp3
+++ b/src/assets/audio/flip2.mp3
--- a/src/assets/js/hash.js
+++ b/src/assets/js/hash.js
--- a/src/assets/js/jquery.min.1.7.js
+++ b/src/assets/js/jquery.min.1.7.js
--- a/src/assets/js/magazine.js
+++ b/src/assets/js/magazine.js
--- a/src/assets/js/modernizr.2.5.3.min.js
+++ b/src/assets/js/modernizr.2.5.3.min.js
--- a/src/assets/js/turn.html4.min.js
+++ b/src/assets/js/turn.html4.min.js
--- a/src/assets/js/turn.js
+++ b/src/assets/js/turn.js
--- a/src/assets/js/zoom.min.js
+++ b/src/assets/js/zoom.min.js
--- a/src/assets/svg/volume-high.svg
+++ b/src/assets/svg/volume-high.svg
--- a/src/assets/svg/volume-mute.svg
+++ b/src/assets/svg/volume-mute.svg
--- a/src/components.d.ts
+++ b/src/components.d.ts
--- a/src/components/BookReader/index.vue
+++ b/src/components/BookReader/index.vue
--- a/src/components/BookReader/mobile.scss
+++ b/src/components/BookReader/mobile.scss
--- a/src/components/Guide copy.vue
+++ b/src/components/Guide copy.vue
--- a/src/libs/modernizr-wrapper.js
+++ b/src/libs/modernizr-wrapper.js
--- a/src/libs/modernizr.js
+++ b/src/libs/modernizr.js
--- a/src/router/index.js
+++ b/src/router/index.js
--- a/src/views/test/index.vue
+++ b/src/views/test/index.vue
--- a/vite.config.js
+++ b/vite.config.js