gemer 4 лет назад
Родитель
Сommit
dd01476a6d

+ 4 - 0
.cssrem

@@ -0,0 +1,4 @@
+{
+  "rootFontSize": 14,
+  "fixedDigits": 3
+}

+ 108 - 21
package-lock.json

@@ -1895,7 +1895,6 @@
       "version": "6.12.3",
       "resolved": "https://registry.npm.taobao.org/ajv/download/ajv-6.12.3.tgz?cache=0&sync_timestamp=1593876933357&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv%2Fdownload%2Fajv-6.12.3.tgz",
       "integrity": "sha1-GMWvOKER3etPJpe9eNaKvByr1wY=",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1912,8 +1911,7 @@
     "ajv-keywords": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.1.tgz?cache=0&sync_timestamp=1594153583457&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.1.tgz",
-      "integrity": "sha1-uDyonF1C1pAx9CTK1JqtoCNsaVc=",
-      "dev": true
+      "integrity": "sha1-uDyonF1C1pAx9CTK1JqtoCNsaVc="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -2255,6 +2253,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -2352,8 +2355,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "http://registry.npm.taobao.org/big.js/download/big.js-5.2.2.tgz",
-      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
-      "dev": true
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg="
     },
     "binary-extensions": {
       "version": "2.1.0",
@@ -4364,8 +4366,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
-      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
-      "dev": true
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -4982,8 +4983,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
-      "dev": true
+      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -5025,8 +5025,7 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz?cache=0&sync_timestamp=1576340291001&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-json-stable-stringify%2Fdownload%2Ffast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
-      "dev": true
+      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -6511,8 +6510,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "http://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=",
-      "dev": true
+      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -6536,7 +6534,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz?cache=0&sync_timestamp=1586045700847&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson5%2Fdownload%2Fjson5-2.1.3.tgz",
       "integrity": "sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5"
       }
@@ -6744,7 +6741,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-1.4.0.tgz?cache=0&sync_timestamp=1584445207623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floader-utils%2Fdownload%2Floader-utils-1.4.0.tgz",
       "integrity": "sha1-xXm140yzSxp07cbB+za/o3HVphM=",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -6755,7 +6751,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npm.taobao.org/json5/download/json5-1.0.1.tgz?cache=0&sync_timestamp=1586045700847&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson5%2Fdownload%2Fjson5-1.0.1.tgz",
           "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -7079,8 +7074,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminimist%2Fdownload%2Fminimist-1.2.5.tgz",
-      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
-      "dev": true
+      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
     "minipass": {
       "version": "3.1.3",
@@ -7870,6 +7864,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pdfjs-dist": {
+      "version": "2.6.347",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
+      "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "http://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz",
@@ -8683,8 +8682,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "http://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz",
-      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
-      "dev": true
+      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
     },
     "q": {
       "version": "1.5.1",
@@ -8763,6 +8761,58 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "@types/json-schema": {
+          "version": "7.0.7",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+          "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
+        },
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-5.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fread-pkg%2Fdownload%2Fread-pkg-5.2.0.tgz",
@@ -10515,7 +10565,6 @@
       "version": "4.2.2",
       "resolved": "http://registry.npm.taobao.org/uri-js/download/uri-js-4.2.2.tgz",
       "integrity": "sha1-lMVA4f93KVbiKZUHwBCupsiDjrA=",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -10732,6 +10781,24 @@
         }
       }
     },
+    "vue-pdf": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vue-pdf/-/vue-pdf-4.2.0.tgz",
+      "integrity": "sha512-GpAbZfM48Hom1R8f4XL5ZzoVBLlbyy+4z0VYmTQORVOSieVIIu+XtnNl0RY6EXg60Qni6T6nIgrmsCcCkWv39A==",
+      "requires": {
+        "babel-plugin-syntax-dynamic-import": "^6.18.0",
+        "loader-utils": "^1.4.0",
+        "pdfjs-dist": "^2.5.207",
+        "raw-loader": "^4.0.1",
+        "vue-resize-sensor": "^2.0.0",
+        "worker-loader": "^2.0.0"
+      }
+    },
+    "vue-resize-sensor": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
+      "integrity": "sha512-W+y2EAI/BxS4Vlcca9scQv8ifeBFck56DRtSwWJ2H4Cw1GLNUYxiZxUHHkuzuI5JPW/cYtL1bPO5xPyEXx4LmQ=="
+    },
     "vue-router": {
       "version": "3.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.4.tgz?cache=0&sync_timestamp=1594111718735&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.4.tgz",
@@ -11422,6 +11489,26 @@
         "errno": "~0.1.7"
       }
     },
+    "worker-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
+      "integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
+      "requires": {
+        "loader-utils": "^1.0.0",
+        "schema-utils": "^0.4.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
+          "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-6.2.0.tgz",

+ 1 - 0
package.json

@@ -13,6 +13,7 @@
     "swiper": "^5.4.5",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-pdf": "^4.2.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.5.1"
   },

+ 24 - 13
public/index.html

@@ -1,29 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
-    <meta name="format-detection" content="telephone=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
     <title>川陕苏区税收文物陈列展</title>
     <script>
-      (function(){
-        if (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1) {
-                window.location.href = '/mobile.html';
-            }
-        })();
+      (function() {
+        if (
+          navigator.userAgent.indexOf("iPhone") > -1 ||
+          navigator.userAgent.indexOf("Android") > -1
+        ) {
+          window.location.href = "/mobile.html";
+        }
+      })();
     </script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/jquery-2.1.1.min.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/audio.min.1.0.4.js"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/jquery.media.js"></script>
 
     <!-- built files will be auto injected -->
   </body>

+ 512 - 0
public/static/js/jquery.media.js

@@ -0,0 +1,512 @@
+/*
+ * jQuery Media Plugin for converting elements into rich media content.
+ *
+ * Examples and documentation at: http://malsup.com/jquery/media/
+ * Copyright (c) 2007-2010 M. Alsup
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * @author: M. Alsup
+ * @version: 0.99 (05-JUN-2013)
+ * @requires jQuery v1.1.2 or later
+ * $Id: jquery.media.js 2460 2007-07-23 02:53:15Z malsup $
+ *
+ * Supported Media Players:
+ *	- Flash
+ *	- Quicktime
+ *	- Real Player
+ *	- Silverlight
+ *	- Windows Media Player
+ *	- iframe
+ *
+ * Supported Media Formats:
+ *	 Any types supported by the above players, such as:
+ *	 Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp
+ *	 Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma
+ *	 Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml
+ *
+ * Thanks to Mark Hicken and Brent Pedersen for helping me debug this on the Mac!
+ * Thanks to Dan Rossi for numerous bug reports and code bits!
+ * Thanks to Skye Giordano for several great suggestions!
+ * Thanks to Richard Connamacher for excellent improvements to the non-IE behavior!
+ */
+/*global SWFObject alert Sys */
+/*jshint forin:false */
+;(function($) {
+    "use strict";	
+    
+    var mode = document.documentMode || 0;
+    var msie = /MSIE/.test(navigator.userAgent);
+    var lameIE = msie && (/MSIE (6|7|8)\.0/.test(navigator.userAgent) || mode < 9);
+    
+    /**
+     * Chainable method for converting elements into rich media.
+     *
+     * @param options
+     * @param callback fn invoked for each matched element before conversion
+     * @param callback fn invoked for each matched element after conversion
+     */
+    $.fn.media = function(options, f1, f2) {
+        if (options == 'undo') {
+            return this.each(function() {
+                var $this = $(this);
+                var html = $this.data('media.origHTML');
+                if (html)
+                    $this.replaceWith(html);
+            });
+        }
+        
+        return this.each(function() {
+            if (typeof options == 'function') {
+                f2 = f1;
+                f1 = options;
+                options = {};
+            }
+            var o = getSettings(this, options);
+            // pre-conversion callback, passes original element and fully populated options
+            if (typeof f1 == 'function') f1(this, o);
+    
+            var r = getTypesRegExp();
+            var m = r.exec(o.src.toLowerCase()) || [''];
+            var fn;
+    
+            if (o.type)
+                m[0] = o.type;
+            else
+                m.shift();
+    
+            for (var i=0; i < m.length; i++) {
+                fn = m[i].toLowerCase();
+                if (isDigit(fn[0])) fn = 'fn' + fn; // fns can't begin with numbers
+                if (!$.fn.media[fn])
+                    continue;  // unrecognized media type
+                // normalize autoplay settings
+                var player = $.fn.media[fn+'_player'];
+                if (!o.params) o.params = {};
+                if (player) {
+                    var num = player.autoplayAttr == 'autostart';
+                    o.params[player.autoplayAttr || 'autoplay'] = num ? (o.autoplay ? 1 : 0) : o.autoplay ? true : false;
+                }
+                var $div = $.fn.media[fn](this, o);
+    
+                $div.css('backgroundColor', o.bgColor).width(o.width);
+                
+                if (o.canUndo) {
+                    var $temp = $('<div></div>').append(this);
+                    $div.data('media.origHTML', $temp.html()); // store original markup
+                }
+                
+                // post-conversion callback, passes original element, new div element and fully populated options
+                if (typeof f2 == 'function') f2(this, $div[0], o, player.name);
+                break;
+            }
+        });
+    };
+    
+    /**
+     * Non-chainable method for adding or changing file format / player mapping
+     * @name mapFormat
+     * @param String format File format extension (ie: mov, wav, mp3)
+     * @param String player Player name to use for the format (one of: flash, quicktime, realplayer, winmedia, silverlight or iframe
+     */
+    $.fn.media.mapFormat = function(format, player) {
+        if (!format || !player || !$.fn.media.defaults.players[player]) return; // invalid
+        format = format.toLowerCase();
+        if (isDigit(format[0])) format = 'fn' + format;
+        $.fn.media[format] = $.fn.media[player];
+        $.fn.media[format+'_player'] = $.fn.media.defaults.players[player];
+    };
+    
+    // global defautls; override as needed
+    $.fn.media.defaults = {
+        standards:  true,       // use object tags only (no embeds for non-IE browsers)
+        canUndo:    true,       // tells plugin to store the original markup so it can be reverted via: $(sel).mediaUndo()
+        width:		400,
+        height:		400,
+        autoplay:	0,			// normalized cross-player setting
+        bgColor:	'#ffffff',	// background color
+        params:		{ wmode: 'transparent'},	// added to object element as param elements; added to embed element as attrs
+        attrs:		{},			// added to object and embed elements as attrs
+        flvKeyName: 'file',		// key used for object src param (thanks to Andrea Ercolino)
+        flashvars:	{},			// added to flash content as flashvars param/attr
+        flashVersion:	'7',	// required flash version
+        expressInstaller: null,	// src for express installer
+    
+        // default flash video and mp3 player (@see: http://jeroenwijering.com/?item=Flash_Media_Player)
+        flvPlayer:	 'mediaplayer.swf',
+        mp3Player:	 'mediaplayer.swf',
+    
+        // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
+        silverlight: {
+            inplaceInstallPrompt: 'true', // display in-place install prompt?
+            isWindowless:		  'true', // windowless mode (false for wrapping markup)
+            framerate:			  '24',	  // maximum framerate
+            version:			  '0.9',  // Silverlight version
+            onError:			  null,	  // onError callback
+            onLoad:			      null,   // onLoad callback
+            initParams:			  null,	  // object init params
+            userContext:		  null	  // callback arg passed to the load callback
+        }
+    };
+    
+    // Media Players; think twice before overriding
+    $.fn.media.defaults.players = {
+        flash: {
+            name:		 'flash',
+            title:		 'Flash',
+            types:		 'flv,mp3,swf',
+            mimetype:	 'application/x-shockwave-flash',
+            pluginspage: 'http://www.adobe.com/go/getflashplayer',
+            ieAttrs: {
+                classid:  'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',
+                type:	  'application/x-oleobject',
+                codebase: 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=' + $.fn.media.defaults.flashVersion
+            }
+        },
+        quicktime: {
+            name:		 'quicktime',
+            title:		 'QuickTime',
+            mimetype:	 'video/quicktime',
+            pluginspage: 'http://www.apple.com/quicktime/download/',
+            types:		 'aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3gp',
+            ieAttrs: {
+                classid:  'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
+                codebase: 'http://www.apple.com/qtactivex/qtplugin.cab'
+            }
+        },
+        realplayer: {
+            name:		  'real',
+            title:		  'RealPlayer',
+            types:		  'ra,ram,rm,rpm,rv,smi,smil',
+            mimetype:	  'audio/x-pn-realaudio-plugin',
+            pluginspage:  'http://www.real.com/player/',
+            autoplayAttr: 'autostart',
+            ieAttrs: {
+                classid: 'clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
+            }
+        },
+        winmedia: {
+            name:		  'winmedia',
+            title:		  'Windows Media',
+            types:		  'asx,asf,avi,wma,wmv',
+            mimetype:	  isFirefoxWMPPluginInstalled() ? 'application/x-ms-wmp' : 'application/x-mplayer2',
+            pluginspage:  'http://www.microsoft.com/Windows/MediaPlayer/',
+            autoplayAttr: 'autostart',
+            oUrl:		  'url',
+            ieAttrs: {
+                classid:  'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6',
+                type:	  'application/x-oleobject'
+            }
+        },
+        // special cases
+        img: {
+            name:  'img',
+            title: 'Image',
+            types: 'gif,png,jpg'
+        },
+        iframe: {
+            name:  'iframe',
+            types: 'html,pdf'
+        },
+        silverlight: {
+            name:  'silverlight',
+            types: 'xaml'
+        }
+    };
+    
+    //
+    //	everything below here is private
+    //
+    
+    
+    // detection script for FF WMP plugin (http://www.therossman.org/experiments/wmp_play.html)
+    // (hat tip to Mark Ross for this script)
+    function isFirefoxWMPPluginInstalled() {
+        var plugs = navigator.plugins || [];
+        for (var i = 0; i < plugs.length; i++) {
+            var plugin = plugs[i];
+            if (plugin['filename'] == 'np-mswmp.dll')
+                return true;
+        }
+        return false;
+    }
+    
+    var counter = 1;
+    
+    for (var player in $.fn.media.defaults.players) {
+        var types = $.fn.media.defaults.players[player].types;
+        $.each(types.split(','), function(i,o) {
+            if (isDigit(o[0])) o = 'fn' + o;
+            $.fn.media[o] = $.fn.media[player] = getGenerator(player);
+            $.fn.media[o+'_player'] = $.fn.media.defaults.players[player];
+        });
+    }
+    
+    function getTypesRegExp() {
+        var types = '';
+        for (var player in $.fn.media.defaults.players) {
+            if (types.length) types += ',';
+            types += $.fn.media.defaults.players[player].types;
+        }
+        return new RegExp('\\.(' + types.replace(/,/ig,'|') + ')\\b');
+    }
+    
+    function getGenerator(player) {
+        return function(el, options) {
+            return generate(el, options, player);
+        };
+    }
+    
+    function isDigit(c) {
+        return '0123456789'.indexOf(c) > -1;
+    }
+    
+    // flatten all possible options: global defaults, meta, option obj
+    function getSettings(el, options) {
+        options = options || {};
+        var a, n;
+        var $el = $(el);
+        var cls = el.className || '';
+        // support metadata plugin (v1.0 and v2.0)
+        var meta = $.metadata ? $el.metadata() : $.meta ? $el.data() : {};
+        meta = meta || {};
+        var w = meta.width  || parseInt(((cls.match(/\bw:(\d+)/)||[])[1]||0),10) || parseInt(((cls.match(/\bwidth:(\d+)/)||[])[1]||0),10);
+        var h = meta.height || parseInt(((cls.match(/\bh:(\d+)/)||[])[1]||0),10) || parseInt(((cls.match(/\bheight:(\d+)/)||[])[1]||0),10);
+    
+        if (w) meta.width = w;
+        if (h) meta.height = h;
+        if (cls) meta.cls = cls;
+        
+        // crank html5 style data attributes
+        var dataName = 'data-';
+        for (var i=0; i < el.attributes.length; i++) {
+            a = el.attributes[i], n = $.trim(a.name);
+            var index = n.indexOf(dataName);
+            if (index === 0) {
+                n = n.substring(dataName.length);
+                meta[n] = a.value;
+            }
+        }
+    
+        a = $.fn.media.defaults;
+        var b = options;
+        var c = meta;
+    
+        var p = { params: { bgColor: options.bgColor || $.fn.media.defaults.bgColor } };
+        var opts = $.extend({}, a, b, c);
+        $.each(['attrs','params','flashvars','silverlight'], function(i,o) {
+            opts[o] = $.extend({}, p[o] || {}, a[o] || {}, b[o] || {}, c[o] || {});
+        });
+    
+        if (typeof opts.caption == 'undefined') opts.caption = $el.text();
+    
+        // make sure we have a source!
+        opts.src = opts.src || $el.attr('href') || $el.attr('src') || 'unknown';
+        return opts;
+    }
+    
+    //
+    //	Flash Player
+    //
+    
+    // generate flash using SWFObject library if possible
+    $.fn.media.swf = function(el, opts) {
+        var f, p;
+        if (!window.SWFObject && !window.swfobject) {
+            // roll our own
+            if (opts.flashvars) {
+                var a = [];
+                for (f in opts.flashvars)
+                    a.push(f + '=' + opts.flashvars[f]);
+                if (!opts.params) opts.params = {};
+                opts.params.flashvars = a.join('&');
+            }
+            return generate(el, opts, 'flash');
+        }
+    
+        var id = el.id ? (' id="'+el.id+'"') : '';
+        var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+        var $div = $('<div' + id + cls + '>');
+    
+        // swfobject v2+
+        if (window.swfobject) {
+            $(el).after($div).appendTo($div);
+            if (!el.id) el.id = 'movie_player_' + counter++;
+    
+            // replace el with swfobject content
+            window.swfobject.embedSWF(opts.src, el.id, opts.width, opts.height, opts.flashVersion,
+                opts.expressInstaller, opts.flashvars, opts.params, opts.attrs);
+        }
+        // swfobject < v2
+        else {
+            $(el).after($div).remove();
+            var so = new SWFObject(opts.src, 'movie_player_' + counter++, opts.width, opts.height, opts.flashVersion, opts.bgColor);
+            if (opts.expressInstaller) so.useExpressInstall(opts.expressInstaller);
+    
+            for (p in opts.params)
+                if (p != 'bgColor') so.addParam(p, opts.params[p]);
+            for (f in opts.flashvars)
+                so.addVariable(f, opts.flashvars[f]);
+            so.write($div[0]);
+        }
+    
+        if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
+        return $div;
+    };
+    
+    // map flv and mp3 files to the swf player by default
+    $.fn.media.flv = $.fn.media.mp3 = function(el, opts) {
+        var src = opts.src;
+        var player = /\.mp3\b/i.test(src) ? opts.mp3Player : opts.flvPlayer;
+        var key = opts.flvKeyName;
+        src = encodeURIComponent(src);
+        opts.src = player;
+        opts.src = opts.src + '?'+key+'=' + (src);
+        var srcObj = {};
+        srcObj[key] = src;
+        opts.flashvars = $.extend({}, srcObj, opts.flashvars );
+        return $.fn.media.swf(el, opts);
+    };
+    
+    //
+    //	Silverlight
+    //
+    $.fn.media.xaml = function(el, opts) {
+        if (!window.Sys || !window.Sys.Silverlight) {
+            if ($.fn.media.xaml.warning) return;
+            $.fn.media.xaml.warning = 1;
+            alert('You must include the Silverlight.js script.');
+            return;
+        }
+    
+        var props = {
+            width: opts.width,
+            height: opts.height,
+            background: opts.bgColor,
+            inplaceInstallPrompt: opts.silverlight.inplaceInstallPrompt,
+            isWindowless: opts.silverlight.isWindowless,
+            framerate: opts.silverlight.framerate,
+            version: opts.silverlight.version
+        };
+        var events = {
+            onError: opts.silverlight.onError,
+            onLoad: opts.silverlight.onLoad
+        };
+    
+        var id1 = el.id ? (' id="'+el.id+'"') : '';
+        var id2 = opts.id || 'AG' + counter++;
+        // convert element to div
+        var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+        var $div = $('<div' + id1 + cls + '>');
+        $(el).after($div).remove();
+    
+        Sys.Silverlight.createObjectEx({
+            source: opts.src,
+            initParams: opts.silverlight.initParams,
+            userContext: opts.silverlight.userContext,
+            id: id2,
+            parentElement: $div[0],
+            properties: props,
+            events: events
+        });
+    
+        if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
+        return $div;
+    };
+    
+    //
+    // generate object/embed markup
+    //
+    function generate(el, opts, player) {
+        var $el = $(el);
+        var o = $.fn.media.defaults.players[player];
+        var a, key, v;
+    
+        if (player == 'iframe') {
+            o = $('<iframe' + ' width="' + opts.width + '" height="' + opts.height + '" >');
+            o.attr('src', opts.src);
+            o.css('backgroundColor', o.bgColor);
+        }
+        else if (player == 'img') {
+            o = $('<img>');
+            o.attr('src', opts.src);
+            if (opts.width)
+                o.attr('width', opts.width);
+            if (opts.height)
+                o.attr('height', opts.height);
+            o.css('backgroundColor', o.bgColor);
+        }
+        else if (lameIE) {
+            a = ['<object width="' + opts.width + '" height="' + opts.height + '" '];
+            for (key in opts.attrs)
+                a.push(key + '="'+opts.attrs[key]+'" ');
+            for (key in o.ieAttrs || {}) {
+                v = o.ieAttrs[key];
+                if (key == 'codebase' && window.location.protocol == 'https:')
+                    v = v.replace('http','https');
+                a.push(key + '="'+v+'" ');
+            }
+            a.push('></ob'+'ject'+'>');
+            var p = ['<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">'];
+            for (key in opts.params)
+                p.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
+            o = document.createElement(a.join(''));
+            for (var i=0; i < p.length; i++)
+                o.appendChild(document.createElement(p[i]));
+        }
+        else if (opts.standards) {
+            // Rewritten to be standards compliant by Richard Connamacher
+            a = ['<object type="' + o.mimetype +'" width="' + opts.width + '" height="' + opts.height +'"'];
+            if (opts.src) a.push(' data="' + opts.src + '" ');
+            if (msie) {
+                for (key in o.ieAttrs || {}) {
+                    v = o.ieAttrs[key];
+                    if (key == 'codebase' && window.location.protocol == 'https:')
+                        v = v.replace('http','https');
+                    a.push(key + '="'+v+'" ');
+                }
+            }
+            a.push('>');
+            a.push('<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">');
+            for (key in opts.params) {
+                if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
+                    continue;
+                a.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
+            }
+            // Alternate HTML
+            a.push('<div><p><strong>'+o.title+' Required</strong></p><p>'+o.title+' is required to view this media. <a href="'+o.pluginspage+'">Download Here</a>.</p></div>');
+            a.push('</ob'+'ject'+'>');
+        }
+         else {
+                a = ['<embed width="' + opts.width + '" height="' + opts.height + '" style="display:block"'];
+                if (opts.src) a.push(' src="' + opts.src + '" ');
+                for (key in opts.attrs)
+                    a.push(key + '="'+opts.attrs[key]+'" ');
+                for (key in o.eAttrs || {})
+                    a.push(key + '="'+o.eAttrs[key]+'" ');
+                for (key in opts.params) {
+                    if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
+                        continue;
+                    a.push(key + '="'+opts.params[key]+'" ');
+                }
+                a.push('></em'+'bed'+'>');
+            }	
+        // convert element to div
+        var id = el.id ? (' id="'+el.id+'"') : '';
+        var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+        var $div = $('<div' + id + cls + '>');
+        $el.after($div).remove();
+        if (lameIE || player == 'iframe' || player == 'img')
+            $div.append(o);
+        else
+            $div.html(a.join(''));
+        
+        if (opts.caption) 
+            $('<div>').appendTo($div).html(opts.caption);
+        return $div;
+    }
+    
+    
+    })(jQuery);
+    

+ 55 - 40
src/assets/style/public.less

@@ -1,28 +1,50 @@
-@cdn:'https://houseoss.4dkankan.com/chuanshan';
+@cdn: "https://houseoss.4dkankan.com/chuanshan";
 
+:root {
+  font-size: 16px;
+}
 html {
   background: #fff;
-  font-family: "Microsoft YaHei";
+  font-family: "SimSun", "Microsoft YaHei", Arial, Helvetica, sans-serif;
+  -webkit-appearance: none;
+  overflow-x: hidden;
 }
+
 * {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   tap-highlight-color: rgba(0, 0, 0, 0);
-  font-size: 24px;
+  font-size: 14px;
+}
+body::-webkit-scrollbar {
+  width: 1px;
 }
 
+body::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
 
+body::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
+}
+.font_h {
+  font-size: 1.5rem;
+}
+.font_n {
+  font-size: 0.875rem;
+}
 .search-cls {
   display: flex;
-  border: .04rem #ccc solid;
+  border: 0.04rem #ccc solid;
   align-items: center;
   font-size: 0;
   input {
-    font-size: .67rem;
+    font-size: 0.67rem;
     border: none;
-    padding-left: .42rem;
+    padding-left: 0.42rem;
   }
   .search-btn {
-    padding: .25rem .83rem;
+    padding: 0.25rem 0.83rem;
     cursor: pointer;
   }
 }
@@ -42,7 +64,7 @@ html {
 }
 .ppq-audio-player .play-pause-btn .play-pause-icon:after,
 .ppq-audio-player.player-playing .play-pause-icon:after {
-  background-size: 1.54rem .75rem;
+  background-size: 1.54rem 0.75rem;
 }
 .ppq-audio-player {
   position: relative;
@@ -59,7 +81,6 @@ html {
 }
 
 .ppq-audio-player .play-pause-btn {
-
 }
 .ppq-audio-player .play-pause-btn .play-pause-icon {
   position: relative;
@@ -67,32 +88,32 @@ html {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 100%;
-  margin-right: .42rem;
+  margin-right: 0.42rem;
 }
 .ppq-audio-player .play-pause-btn .play-pause-icon:after {
   display: block;
   content: "播放";
   width: 2.5rem;
   font-size: 1rem;
-  color: #DF3B2F;
+  color: #df3b2f;
   height: 1rem;
   line-height: 1rem;
 }
 
-.ppq-audio-player .play-pause-btn .play-pause-icon::before{
-    display: block;
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: -2.08rem;
-    transform: translateY(-50%);
-    width: 1rem;
-    height: 1rem;
-    color: #DF3B2F;
-    line-height: 1.25rem;
-    background: url("@{cdn}/images/bofang_r.png") no-repeat;
-    background-position: 0 0;
-    background-size: 100% 100%;
+.ppq-audio-player .play-pause-btn .play-pause-icon::before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -2.08rem;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  color: #df3b2f;
+  line-height: 1.25rem;
+  background: url("@{cdn}/images/bofang_r.png") no-repeat;
+  background-position: 0 0;
+  background-size: 100% 100%;
 }
 
 .ppq-audio-player.player-playing .play-pause-icon:after {
@@ -108,18 +129,18 @@ html {
 .ppq-audio-player .player-time {
   float: left;
   width: 2.13rem;
-  margin-right: .33rem;
+  margin-right: 0.33rem;
   text-align: right;
   display: none;
 }
 .ppq-audio-player .player-time-duration {
   float: right;
-  margin: 0 0 0 .33rem;
+  margin: 0 0 0 0.33rem;
   text-align: left;
 }
 .ppq-audio-player .player-bar {
   position: relative;
-  height: .33rem;
+  height: 0.33rem;
   margin-left: 1rem;
   width: 14.17rem;
   background: #9e9e9e;
@@ -130,7 +151,7 @@ html {
   left: 0;
   width: 0;
   height: 100%;
-  border-radius: .13rem;
+  border-radius: 0.13rem;
   background: #9e9e9e;
 }
 .ppq-audio-player .player-bar .player-bar-played {
@@ -139,24 +160,18 @@ html {
   left: 0;
   width: 0;
   height: 100%;
-  border-radius: .13rem;
+  border-radius: 0.13rem;
 }
 
 .ppq-audio-player .player-bar .player-bar-played::after {
-  width: .42rem;
-  height: .42rem;
-  background: #DF3B2F;
+  width: 0.42rem;
+  height: 0.42rem;
+  background: #df3b2f;
   position: absolute;
   right: -0.33rem;
   top: 50%;
   transform: translateY(-50%);
   border-radius: 50%;
-  content: '';
+  content: "";
   display: inline-block;
 }
-
-@media screen and (max-width: 1400px) {
-  * {
-    font-size: 16px;
-  }
-}

+ 4 - 2
src/components/bmSlide/index.vue

@@ -8,7 +8,9 @@
         <h3>{{ activeItem.name }}</h3>
         <p v-if="activeItem.time">年代:{{ activeItem.time || "" }}</p>
         <p v-if="activeItem.size">尺寸:{{ activeItem.size || "" }}</p>
-        <div class="desc" v-if="activeItem.describe">{{ activeItem.describe || "" }}</div>
+        <div class="desc" v-if="activeItem.describe">
+          {{ activeItem.describe || "" }}
+        </div>
         <div class="qrcode" v-if="activeItem.qrcode">
           <img :src="`${$cdn}/images/qrcode/${activeItem.qrcode}.png`" alt="" />
           <span>了解更多故事</span>
@@ -155,4 +157,4 @@ export default {
     width: 60%;
   }
 }
-</style>
+</style>

+ 55 - 55
src/components/bmSlide/slide.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="swiper-container">
-    <div id="sPrev" class="pagenav" @click="slide('slidePrev')" >
-      <img :src="`${$cdn}/images/prev_${isTheme?'r':'w'}.png`"/>
+    <div id="sPrev" class="pagenav" @click="slide('slidePrev')">
+      <img :src="`${$cdn}/images/prev_${isTheme ? 'r' : 'w'}.png`" />
     </div>
 
     <swiper
@@ -11,17 +11,21 @@
     >
       <swiper-slide
         class="swiper-slide"
-        :style="{background:$linear[item.bgid]}"
-        :class="index===activeIdx? `${isTheme?'slide-active':'slide-activew'}`:''"
+        :style="{ background: $linear[item.bgid] }"
+        :class="
+          index === activeIdx
+            ? `${isTheme ? 'slide-active' : 'slide-activew'}`
+            : ''
+        "
         v-for="(item, index) in list"
         :key="index"
       >
-        <img @click="slideto(index)" class="logo" :src="item.imgstr"/>
+        <img @click="slideto(index)" class="logo" :src="item.imgstr" />
       </swiper-slide>
     </swiper>
 
     <div id="sNext" class="pagenav" @click="slide('slideNext')">
-      <img :src="`${$cdn}/images/next_${isTheme?'r':'w'}.png`" />
+      <img :src="`${$cdn}/images/next_${isTheme ? 'r' : 'w'}.png`" />
     </div>
   </div>
 </template>
@@ -30,7 +34,7 @@ import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 
 export default {
-  props:['list','idx','isTheme'],
+  props: ["list", "idx", "isTheme"],
   computed: {
     swiper() {
       return this.$refs.listSwiper.$swiper;
@@ -40,15 +44,14 @@ export default {
         slidesPerView: "auto",
         spaceBetween: 30,
         centeredSlides: true,
-        centeredSlidesBounds:true,
-        centerInsufficientSlides:true,
+        centeredSlidesBounds: true,
+        centerInsufficientSlides: true,
         // freeMode:true,
         // normalizeSlideIndex: true,
         // slideActiveClass : 'slide-active',
         on: {
-          slideChange: function () {
-          }
-        }
+          slideChange: function() {},
+        },
       };
     },
   },
@@ -62,36 +65,37 @@ export default {
       prevActive: false,
     };
   },
-  watch:{
-    activeIdx(newVal){
-      this.$emit('activeItem',this.list[newVal])
-    }
+  watch: {
+    activeIdx(newVal) {
+      this.$emit("activeItem", this.list[newVal]);
+    },
   },
+
   methods: {
-    slideto(idx){
-      this.swiper.slideTo(idx)
-      this.activeIdx = idx
+    slideto(idx) {
+      this.swiper.slideTo(idx);
+      this.activeIdx = idx;
     },
     goto(url) {
       window.open(url, "_blank");
     },
-    slide(name){
-      if (name==='slideNext') {
-        if (this.activeIdx < this.list.length-1) {
-          this.activeIdx += 1
-        }
-        else{
-          return
+    slide(name) {
+      if (name === "slideNext") {
+        if (this.activeIdx < this.list.length - 1) {
+          this.activeIdx += 1;
+        } else {
+          return;
         }
-      }else{
-        this.activeIdx = this.activeIdx > 0 ? this.activeIdx-1 : this.activeIdx
-        if (this.activeIdx==0) {
-          return
+      } else {
+        this.activeIdx =
+          this.activeIdx > 0 ? this.activeIdx - 1 : this.activeIdx;
+        if (this.activeIdx == 0) {
+          return;
         }
       }
 
-      this.swiper[name]()
-    }
+      this.swiper[name]();
+    },
   },
   components: {
     Swiper,
@@ -101,34 +105,33 @@ export default {
     swiper: directive,
   },
   mounted() {
-   
   },
 };
 </script>
 <style lang="less" scoped>
 .swiper-container {
   position: relative;
-  margin: .83rem auto 0;
+  margin: 0.83rem auto 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  .pagenav{
+  .pagenav {
     display: flex;
     align-items: center;
     position: relative;
-    top: .08rem;
-    img{
+    top: 0.08rem;
+    img {
       cursor: pointer;
       width: 1.67rem;
     }
-    .active{
+    .active {
       opacity: 0;
       position: absolute;
       left: 0;
       top: 0;
     }
-    &:hover{
-      .active{
+    &:hover {
+      .active {
         opacity: 1;
       }
     }
@@ -136,11 +139,11 @@ export default {
 }
 
 .swiper-wrapper {
-  margin-top: .42rem;
+  margin-top: 0.42rem;
   width: calc(100% - 7.5rem);
   display: flex;
   align-items: center;
-  padding: .83rem 1.25rem;
+  padding: 0.83rem 1.25rem;
 }
 
 .swiper-slide {
@@ -151,26 +154,25 @@ export default {
   width: 10.83rem;
   height: 6.67rem;
   box-sizing: border-box;
-  background: #403F3D;
+  background: #403f3d;
 }
 
 .slide-active {
-  border: .17rem solid #DF3B2F;
+  border: 0.17rem solid #df3b2f;
 }
 
-.slide-activew{
-  border: .17rem solid #F5B55F;
+.slide-activew {
+  border: 0.17rem solid #f5b55f;
 }
 
-
 .swiper-slide img {
   width: 50%;
   position: absolute;
   top: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   left: 50%;
 }
-.swiper-slide> div{
+.swiper-slide > div {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -178,20 +180,18 @@ export default {
   top: 0;
   overflow: hidden;
 }
-.swiper-slide .mask{
-  background: #804D28;
+.swiper-slide .mask {
+  background: #804d28;
   opacity: 0.5;
 }
 
-.swiper-slide .mask1{
+.swiper-slide .mask1 {
   background: #6e4029;
   opacity: 0.65;
 }
 
-.swiper-slide .mask2{
+.swiper-slide .mask2 {
   background: #4b2b13;
   opacity: 0.65;
 }
-
-
 </style>

+ 2 - 2
src/components/popupLayout/Broadcast.vue

@@ -8,13 +8,13 @@
 import showCollection from '@/components/showCollection'
 import showMbCollection from '@/components/showMbCollection'
 import Sidebar from '@/components/SlideBar/'
-import broswer from '@/config/broswer'
+import browser from '@/config/browser.js'
 
 
 
 export default {
   components:{
-    showCollection:broswer.mobile?showMbCollection:showCollection,
+    showCollection:browser.mobile?showMbCollection:showCollection,
     Sidebar
   },
   data(){

src/config/broswer.js → src/config/browser.js


+ 2 - 2
src/pages/index.vue

@@ -23,7 +23,7 @@ import '@/assets/theme/color.less'
 
 import layout from '@/views/layout/index.vue'
 import {mapState} from 'vuex'
-import broswer from '@/config/broswer'
+import browser from '@/config/browser'
 
 export default {
   components:{
@@ -32,7 +32,7 @@ export default {
   },
   data(){
     return {
-      broswer,
+      browser,
       link: window.location.href,
       tips:[],
       canUse:false,

+ 2 - 2
src/pages/mobile.vue

@@ -23,7 +23,7 @@ import "@/assets/theme/color.less";
 
 import layout from "@/views/layout/mobile/index.vue";
 import { mapState } from "vuex";
-import broswer from "@/config/broswer";
+import browser from "@/config/browser";
 
 export default {
   components: {
@@ -32,7 +32,7 @@ export default {
   },
   data() {
     return {
-      broswer,
+      browser,
       link: window.location.href,
       tips: [],
       canUse: false,

+ 186 - 182
src/views/layout/header.vue

@@ -2,95 +2,98 @@
   <div class="header primary">
     <div class="h-content">
       <div class="logo">
-      <span @click="gotoHome">川陕苏区税收文物陈列展</span>
-    </div>
+        <span @click="gotoHome">川陕苏区税收文物陈列展</span>
+      </div>
 
-    <ul class="navs">
-      <li @click="navigateTo(item)" :class="{'navActive':item.id===activeIdx}" v-for="(item,i) in navs" :key="i">
-        <span>{{item.name}}</span>
-      </li>
-    </ul>
+      <ul class="navs">
+        <li
+          @click="navigateTo(item)"
+          :class="{ navActive: item.id === activeIdx }"
+          v-for="(item, i) in navs"
+          :key="i"
+        >
+          <span>{{ item.name }}</span>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
 
 <script>
-import {mapState} from 'vuex'
-
-
- const navs = [
-    {
-      name:'首页',
-      link: {path:'/'},
-      id:1
-    },
-    {
-      name:'三维场景',
-      link: {path:'/digital'},
-      id:2
-    },
-    {
-      name:'藏品鉴赏',
-      link:{name:'collection',params:{type:0}},
-      id:3
-    },
-    {
-      name:'资料文库',
-      link:{path:'/spirit'},
-      id:4
-    },
-    {
-      name:'影音内容',
-      link:{path:'/dynamic'},
-      id:5
-    }
-  ]
+import { mapState } from "vuex";
 
+const navs = [
+  {
+    name: "首页",
+    link: { path: "/" },
+    id: 1,
+  },
+  {
+    name: "三维场景",
+    link: { path: "/digital" },
+    id: 2,
+  },
+  {
+    name: "藏品鉴赏",
+    link: { name: "collection", params: { type: 0 } },
+    id: 3,
+  },
+  {
+    name: "资料文库",
+    link: { path: "/spirit" },
+    id: 4,
+  },
+  {
+    name: "影音内容",
+    link: { path: "/dynamic" },
+    id: 5,
+  },
+];
 
-  const navsId = {
-    'home':1,
-    'dynamic':2,
-    'spirit':3,
-    'collection':4,
-    'digital':5,
-    'message':6,
-  }
+const navsId = {
+  home: 1,
+  dynamic: 2,
+  spirit: 3,
+  collection: 4,
+  digital: 5,
+  message: 6,
+};
 
-  const colors = [
-    {
-      name:'酒红',
-      id:'juhong',
-      color:'#b9412e'
-    },
-    {
-      name:'橄榄绿',
-      id:'ganlanlv',
-      color:'#548550'
-    },
-    {
-      name:'暗黄',
-      id:'anhuang',
-      color:'#c48f48'
-    },
-    {
-      name:'天蓝',
-      id:'tianlan',
-      color:'#09bce1'
-    }
-  ]
+const colors = [
+  {
+    name: "酒红",
+    id: "juhong",
+    color: "#b9412e",
+  },
+  {
+    name: "橄榄绿",
+    id: "ganlanlv",
+    color: "#548550",
+  },
+  {
+    name: "暗黄",
+    id: "anhuang",
+    color: "#c48f48",
+  },
+  {
+    name: "天蓝",
+    id: "tianlan",
+    color: "#09bce1",
+  },
+];
 
 export default {
-  data(){
+  data() {
     return {
       navs,
       colors,
-      showSearch:false,
-      keyword:'',
-      date:'',
-      activeIdx:this.$route.meta.id
-    }
+      showSearch: false,
+      keyword: "",
+      date: "",
+      activeIdx: this.$route.meta.id,
+    };
   },
-  computed:{
+  computed: {
     // activeIdx: {
     //   get: function () {
     //     return this.$route.meta.id
@@ -98,54 +101,56 @@ export default {
     //   set: function () {
     //   }
     // },
-    userName(){
-      let condition = window.localStorage.getItem('webuserInfo')
-      let userInfo = ((condition&&condition!='undefined')&&JSON.parse(window.localStorage.getItem('webuserInfo'))) || ''
-      return userInfo.userName
+    userName() {
+      let condition = window.localStorage.getItem("webuserInfo");
+      let userInfo =
+        (condition &&
+          condition != "undefined" &&
+          JSON.parse(window.localStorage.getItem("webuserInfo"))) ||
+        "";
+      return userInfo.userName;
     },
     ...mapState({
-      theme: state => state.common.theme,
-    })
+      theme: (state) => state.common.theme,
+    }),
   },
-  watch:{
-    '$route.meta.id':function(newVal){
-      this.activeIdx = newVal
+  watch: {
+    "$route.meta.id": function(newVal) {
+      this.activeIdx = newVal;
     },
-    '$route.path':function(){
-      this.showSearch = false
+    "$route.path": function() {
+      this.showSearch = false;
+    },
+    showSearch() {
+      this.keyword = "";
     },
-    showSearch(){
-      this.keyword = ''
-    }
   },
-  methods:{
-    gotoHome(){
-      if(this.$route.path == '/'){
-        this.$bus.$emit('backtotop')
-      }
-      else{
-        this.$router.push({path:'/'})
+  methods: {
+    gotoHome() {
+      if (this.$route.path == "/") {
+        this.$bus.$emit("backtotop");
+      } else {
+        this.$router.push({ path: "/" });
       }
     },
-  
-    navigateTo(item){
-      this.$router.push(item.link)
-      this.activeIdx = item.id
-    }
+
+    navigateTo(item) {
+      this.$router.push(item.link);
+      this.activeIdx = item.id;
+    },
   },
-  mounted(){
-    this.$bus.$on('activeId',data=>{
-      this.activeIdx = navsId[data]
-    })
-  }
-}
+  mounted() {
+    this.$bus.$on("activeId", (data) => {
+      this.activeIdx = navsId[data];
+    });
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
-.header{
+.header {
   color: #fff;
-  box-shadow: 0 .08rem .42rem rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0.08rem 0.42rem rgba(0, 0, 0, 0.8);
   font-size: 0;
   padding: 0;
   z-index: 99999;
@@ -153,101 +158,100 @@ export default {
   width: 100%;
   top: 0;
   left: 0;
-  .h-content{
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 90%;
-  margin: 0 auto;
-  .logo{
-    flex: 1;
+  .h-content {
     display: flex;
-    text-align: center;
-    justify-content: flex-start;
+    justify-content: space-around;
     align-items: center;
-    font-weight: bold;
-    letter-spacing: .08rem;
-    >img{
-      cursor: pointer;
-    }
-    >span{
-      font-size: 1.67rem;
-      cursor: pointer;
-    }
-  }
-  .navs{
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    height: 4.58rem;
-    line-height: 4.58rem;
-    box-sizing: border-box;
-    li{
-      position: relative;
-      cursor: pointer;
-      height: 4.58rem;
-      line-height: 100%;
+    width: 90%;
+    margin: 0 auto;
+    .logo {
+      flex: 1;
       display: flex;
-      flex-direction: column;
+      text-align: center;
+      justify-content: flex-start;
       align-items: center;
-      justify-content: center;
-      margin: 0 .42rem;
-      width: 20%;
-      img{
-        margin-top: .5rem;
-        width: 1.38rem;
-      }
-      span{
-        display: block;
-        font-size: 1rem;
+      font-weight: bold;
+      letter-spacing: 0.08rem;
+      > img {
+        cursor: pointer;
       }
-      .child-nav{
-        display: none;
+      > span {
+        font-size: 1.75rem;
+        cursor: pointer;
       }
-      &:hover{
-        .child-nav{
-          width: calc(100% - 1.67rem);
+    }
+    .navs {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      height: 3.4375rem;
+      line-height: 3.4375rem;
+      box-sizing: border-box;
+      li {
+        position: relative;
+        cursor: pointer;
+        height: 3.4375rem;
+        line-height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 0 10px;
+        width: 20%;
+        img {
+          margin-top: 0.5rem;
+          width: 1.38rem;
+        }
+        span {
           display: block;
-          position: absolute;
-          background: #fff;
-          color: #9E9E9E;
-          font-size: .58rem;
-          font-weight: normal;
-          top: 2.33rem;
-          left: 50%;
-          transform: translateX(-50%);
-          z-index: 99;
-          li{
-            line-height: 2.5;
-            height: auto;
-            padding: 0;
-            margin: 0;
+          font-size: .875rem;
+        }
+        .child-nav {
+          display: none;
+        }
+        &:hover {
+          .child-nav {
+            width: calc(100% - 1.67rem);
+            display: block;
+            position: absolute;
+            background: #fff;
+            color: #9e9e9e;
+            font-size: 0.58rem;
+            font-weight: normal;
+            top: 2.33rem;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 99;
+            li {
+              line-height: 2.5;
+              height: auto;
+              padding: 0;
+              margin: 0;
+            }
           }
         }
       }
     }
   }
-  }
 }
 
 @media screen and (max-width: 70.83rem) {
-  .header{
-    .h-content{
+  .header {
+    .h-content {
       width: 90%;
     }
-    .navs{
+    .navs {
       min-width: 25rem;
-      >li{
-        padding: 0 .42rem;
+      > li {
+        padding: 0 0.42rem;
       }
     }
-    .right{
-      .colors{
+    .right {
+      .colors {
         margin-right: 0;
       }
     }
   }
 }
-
-</style>
+</style>

+ 1 - 1
src/views/layout/index.vue

@@ -85,7 +85,7 @@ export default {
 
 <style lang="less" scoped>
 .route-view{
-  padding-top: 3.25rem;
+  padding-top: 55px;
 }
 .con {
   margin-top: 3.25rem;

+ 96 - 73
src/views/spirit/index.vue

@@ -1,37 +1,55 @@
 <template>
   <div class="dy-con">
     <div class="dynamic">
-    <div class="aside">
-      <mSidebar :activeId="String(activeId)" :list="list" @handleItem="handleItem" class="m-sidebar">
-        <div slot="bottom" class="search-cls">
-          <input type="text" placeholder="在此搜索" @keyup.enter="getCollection" v-model="keyword" />
-          <div @click="getCollection" class="search-btn primary">
-            <img :src="require('@/assets/images/search.png')" alt />
+      <div class="aside">
+        <mSidebar
+          :activeId="String(activeId)"
+          :list="list"
+          @handleItem="handleItem"
+          class="m-sidebar"
+        >
+          <div slot="bottom" class="search-cls">
+            <input
+              type="text"
+              placeholder="在此搜索"
+              @keyup.enter="getCollection"
+              v-model="keyword"
+            />
+            <div @click="getCollection" class="search-btn primary">
+              <img :src="require('@/assets/images/search.png')" alt />
+            </div>
           </div>
+        </mSidebar>
+      </div>
+      <div class="d-body">
+        <Article :title="activeItem.title">
+          <div class="info" :slot="'info'">
+            <span>{{ activeItem.createTime }}</span>
+            <!-- <span>{{activeItem.author}}</span> -->
+            <span>浏览次数:{{ activeItem.viewCount || 1 }}次</span>
+          </div>
+          <div :slot="'content'" v-html="activeItem.content"></div>
+        </Article>
+        <div style="width:800px;height:900px">
+          <!-- <embed
+            src="http://www.africau.edu/images/default/sample.pdf"
+            type="application/pdf"
+            width="100%"
+            height="100%"
+          /> -->
+          <div class="pdf_test"></div>
         </div>
-      </mSidebar>
-    </div>
-    <div class="d-body">
-      <Article :title="activeItem.title">
-        <div class="info" :slot="'info'">
-          <span>{{activeItem.createTime}}</span>
-          <!-- <span>{{activeItem.author}}</span> -->
-          <span>浏览次数:{{activeItem.viewCount||1}}次</span>
-        </div>
-        <div :slot="'content'" v-html="activeItem.content"></div>
-      </Article>
+      </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
-import mSidebar from '@/components/Sidebar'
-import Article from '@/components/Article'
-import data from '@/config/pdfdata.js'
-
+import mSidebar from "@/components/Sidebar";
+import Article from "@/components/Article";
+import data from "@/config/pdfdata.js";
 
-const list = []
+const list = [];
 // const data = {
 //   pageNum: 1,
 //   pageSize: 10,
@@ -101,63 +119,69 @@ const list = []
 // }
 
 export default {
-  components:{
+  components: {
     mSidebar,
-    Article
+    Article,
   },
-  data(){
+  data() {
     return {
       activeId: this.$route.query.id,
-      activeItem:'',
+      activeItem: "",
       list,
-      keyword:''
-    }
+      keyword: "",
+      currentPage: 0,
+      pageCount: 0,
+    };
   },
-  mounted(){
-    this.getNews()
+  mounted() {
+    this.getNews();
+    // jQuery(".pdf_test").media({
+    //   width: "100%",
+    //   height: "800px",
+    //   autoplay: true,
+    //   src:
+    //     "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
+    // });
   },
-  watch:{
-    activeId(newVal){
-       this.list.forEach(item=>{
+  watch: {
+    activeId(newVal) {
+      this.list.forEach((item) => {
         if (item.id == newVal) {
-          this.activeItem = item
+          this.activeItem = item;
         }
-      })
-    }
-  },
-  methods:{
-    getCollection(){
-
+      });
     },
-    handleItem(item){
-      this.activeId = item.id
+  },
+  methods: {
+    getCollection() {},
+    handleItem(item) {
+      this.activeId = item.id;
     },
-    pageChange (data) {
-      this.currentPage = data
+    pageChange(data) {
+      this.currentPage = data;
     },
-    async getNews(){
-
-      this.list = data.data
-      console.log('dasdas',this.list);
-      this.list.forEach(item=>{
+    async getNews() {
+      this.list = data.data;
+      console.log("dasdas", this.list);
+      this.list.forEach((item) => {
         if (item.id == this.activeId) {
-          this.activeItem = item
+          this.activeItem = item;
         }
-      })
+      });
       if (!this.activeItem) {
-        this.activeItem = this.list[0]
-        this.activeId = this.list[0].id
+        this.activeItem = this.list[0];
+        this.activeId = this.list[0].id;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.dy-con{
+.dy-con {
   width: 100%;
   background: #f1f1f1;
-  .dynamic{
+  .dynamic {
     position: relative;
     padding: 3.33rem 0;
     max-width: 55rem;
@@ -165,41 +189,40 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    .aside{
+    .aside {
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-top: 1.67rem;
       width: 14.17rem;
       flex-shrink: 0;
-      .m-sidebar{
+      .m-sidebar {
       }
-      
-      .search-cls{
+
+      .search-cls {
         width: 10.42rem;
         background: #fff;
-        margin: .83rem auto;
-        input{
+        margin: 0.83rem auto;
+        input {
           width: 80%;
         }
       }
-      .paging{
-        margin-top: .83rem;
+      .paging {
+        margin-top: 0.83rem;
       }
     }
-    .d-body{
+    .d-body {
       flex: 4;
       margin-left: 3.33rem;
       text-align: center;
-      .info{
-        color: #DF3B2F;
+      .info {
+        color: #df3b2f;
         margin: 1.25rem 0;
-        >span{
+        > span {
           margin-right: 1.25rem;
         }
       }
     }
   }
 }
-
-</style>
+</style>