footer and duration

This commit is contained in:
zyronon 2021-06-24 01:37:11 +08:00
parent 3b8dacfbba
commit 5169c1cbb1
7 changed files with 897 additions and 180 deletions

451
package-lock.json generated
View File

@ -1151,6 +1151,93 @@
"postcss": "^7.0.0"
}
},
"@mapbox/node-pre-gyp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.5.tgz",
"integrity": "sha512-4srsKPXWlIxp5Vbqz5uLfBN+du2fJChBoYn/f2h991WLdk7jUvcSk/McVLSv/X+xQIPI8eGD5GjrnygdyHnhPA==",
"optional": true,
"requires": {
"detect-libc": "^1.0.3",
"https-proxy-agent": "^5.0.0",
"make-dir": "^3.1.0",
"node-fetch": "^2.6.1",
"nopt": "^5.0.0",
"npmlog": "^4.1.2",
"rimraf": "^3.0.2",
"semver": "^7.3.4",
"tar": "^6.1.0"
},
"dependencies": {
"chownr": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
"optional": true
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"optional": true,
"requires": {
"yallist": "^4.0.0"
}
},
"mkdirp": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
"optional": true
},
"nopt": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
"integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
"optional": true,
"requires": {
"abbrev": "1"
}
},
"rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"optional": true,
"requires": {
"glob": "^7.1.3"
}
},
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
"integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
"optional": true,
"requires": {
"lru-cache": "^6.0.0"
}
},
"tar": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
"integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
"optional": true,
"requires": {
"chownr": "^2.0.0",
"fs-minipass": "^2.0.0",
"minipass": "^3.0.0",
"minizlib": "^2.1.1",
"mkdirp": "^1.0.3",
"yallist": "^4.0.0"
}
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"optional": true
}
}
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
@ -1749,6 +1836,63 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"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==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"ssri": {
"version": "8.0.1",
"resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@ -1757,6 +1901,28 @@
"requires": {
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
@ -2156,8 +2322,7 @@
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
"dev": true
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
},
"accepts": {
"version": "1.3.7",
@ -2193,6 +2358,15 @@
"integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
"dev": true
},
"agent-base": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
"optional": true,
"requires": {
"debug": "4"
}
},
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&sync_timestamp=1622991619843&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
@ -2292,8 +2466,7 @@
"aproba": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz",
"integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo=",
"dev": true
"integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo="
},
"arch": {
"version": "2.2.0",
@ -2305,7 +2478,6 @@
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
"dev": true,
"requires": {
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
@ -2579,8 +2751,7 @@
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714383053&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
"integrity": "sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=",
"dev": true
"integrity": "sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4="
},
"base": {
"version": "0.11.2",
@ -2787,7 +2958,6 @@
"version": "1.1.11",
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
"integrity": "sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -3472,8 +3642,7 @@
"code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
"collection-visit": {
"version": "1.0.0",
@ -3603,8 +3772,7 @@
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"concat-stream": {
"version": "1.6.2",
@ -3633,8 +3801,7 @@
"console-control-strings": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
},
"consolidate": {
"version": "0.15.1",
@ -3891,8 +4058,7 @@
"core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
},
"cosmiconfig": {
"version": "5.2.1",
@ -4239,7 +4405,6 @@
"version": "4.3.1",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-4.3.1.tgz?cache=0&sync_timestamp=1607566512593&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.3.1.tgz",
"integrity": "sha1-8NIpxQXgxtjEmsVT0bE9wYP2su4=",
"dev": true,
"requires": {
"ms": "2.1.2"
}
@ -4503,8 +4668,7 @@
"delegates": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"dev": true
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
},
"depd": {
"version": "1.1.2",
@ -4528,6 +4692,12 @@
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
"dev": true
},
"detect-libc": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
"integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
"optional": true
},
"detect-node": {
"version": "2.1.0",
"resolved": "https://registry.nlark.com/detect-node/download/detect-node-2.1.0.tgz",
@ -5726,6 +5896,15 @@
"universalify": "^0.1.0"
}
},
"fs-minipass": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
"optional": true,
"requires": {
"minipass": "^3.0.0"
}
},
"fs-write-stream-atomic": {
"version": "1.0.10",
"resolved": "https://registry.npm.taobao.org/fs-write-stream-atomic/download/fs-write-stream-atomic-1.0.10.tgz",
@ -5741,8 +5920,7 @@
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
"fsevents": {
"version": "2.3.2",
@ -5779,7 +5957,6 @@
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
"requires": {
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
@ -5794,14 +5971,12 @@
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -5810,7 +5985,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -5821,7 +5995,6 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -5903,7 +6076,6 @@
"version": "7.1.7",
"resolved": "https://registry.nlark.com/glob/download/glob-7.1.7.tgz?cache=0&sync_timestamp=1620337382269&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob%2Fdownload%2Fglob-7.1.7.tgz",
"integrity": "sha1-Oxk+kjPwHULQs/eClLvutBj5SpA=",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
@ -6046,8 +6218,7 @@
"has-unicode": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
"dev": true
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
},
"has-value": {
"version": "1.0.0",
@ -6445,6 +6616,16 @@
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
"dev": true
},
"https-proxy-agent": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
"integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
"optional": true,
"requires": {
"agent-base": "6",
"debug": "4"
}
},
"human-signals": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/human-signals/download/human-signals-1.1.1.tgz",
@ -6613,7 +6794,6 @@
"version": "1.0.6",
"resolved": "https://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"requires": {
"once": "^1.3.0",
"wrappy": "1"
@ -6622,8 +6802,7 @@
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz",
"integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=",
"dev": true
"integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w="
},
"inquirer": {
"version": "7.3.3",
@ -7112,8 +7291,7 @@
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
},
"isexe": {
"version": "2.0.0",
@ -7260,6 +7438,11 @@
"verror": "1.10.0"
}
},
"keypress": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/keypress/-/keypress-0.1.0.tgz",
"integrity": "sha1-SjGI1CkbZrT2XtuZ+AaqmuKTWSo="
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@ -7531,7 +7714,6 @@
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz?cache=0&sync_timestamp=1587569115572&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmake-dir%2Fdownload%2Fmake-dir-3.1.0.tgz",
"integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=",
"dev": true,
"requires": {
"semver": "^6.0.0"
}
@ -7768,7 +7950,6 @@
"version": "3.0.4",
"resolved": "https://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz?cache=0&sync_timestamp=1597044082534&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminimatch%2Fdownload%2Fminimatch-3.0.4.tgz",
"integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
"dev": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -7783,7 +7964,6 @@
"version": "3.1.3",
"resolved": "https://registry.npm.taobao.org/minipass/download/minipass-3.1.3.tgz",
"integrity": "sha1-fUL/HzljVILhX5zbUxhN7r1YFf0=",
"dev": true,
"requires": {
"yallist": "^4.0.0"
},
@ -7791,8 +7971,25 @@
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
"integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
"dev": true
"integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI="
}
}
},
"minizlib": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
"optional": true,
"requires": {
"minipass": "^3.0.0",
"yallist": "^4.0.0"
},
"dependencies": {
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"optional": true
}
}
},
@ -7814,6 +8011,11 @@
"through2": "^2.0.0"
}
},
"mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"mixin-deep": {
"version": "1.3.2",
"resolved": "https://registry.npm.taobao.org/mixin-deep/download/mixin-deep-1.3.2.tgz",
@ -7861,8 +8063,7 @@
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433912031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
"integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
"dev": true
"integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk="
},
"multicast-dns": {
"version": "6.2.3",
@ -7961,6 +8162,18 @@
"lower-case": "^1.1.1"
}
},
"node-addon-api": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
"integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
"optional": true
},
"node-fetch": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
"optional": true
},
"node-forge": {
"version": "0.10.0",
"resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz",
@ -8144,6 +8357,16 @@
}
}
},
"nodejieba": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/nodejieba/-/nodejieba-2.5.2.tgz",
"integrity": "sha512-ByskJvaBrQ2eV+5M0OeD80S5NKoGaHc9zi3Z/PTKl/95eac2YF8RmWduq9AknLpkQLrLAIcqurrtC6BzjpKwwg==",
"optional": true,
"requires": {
"@mapbox/node-pre-gyp": "^1.0.4",
"node-addon-api": "^3.0.2"
}
},
"nopt": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
@ -8204,7 +8427,6 @@
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"dev": true,
"requires": {
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
@ -8230,8 +8452,7 @@
"number-is-nan": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
},
"oauth-sign": {
"version": "0.9.0",
@ -8242,8 +8463,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"object-copy": {
"version": "0.1.0",
@ -8381,7 +8601,6 @@
"version": "1.4.0",
"resolved": "https://registry.npm.taobao.org/once/download/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": {
"wrappy": "1"
}
@ -8664,8 +8883,7 @@
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
},
"path-is-inside": {
"version": "1.0.2",
@ -8754,6 +8972,26 @@
"pinkie": "^2.0.0"
}
},
"pinyin": {
"version": "2.10.2",
"resolved": "https://registry.npmjs.org/pinyin/-/pinyin-2.10.2.tgz",
"integrity": "sha512-qAcp7+2vnjm6sAd0B9pp5JpyvHbYoQO1v9zCeJQMEgyw2VeRi02l0gR22ZBgfjjvZ1c2EGoVjJHJ1h0rwr34Ug==",
"requires": {
"commander": "~1.1.1",
"nodejieba": "^2.2.1",
"object-assign": "^4.0.1"
},
"dependencies": {
"commander": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-1.1.1.tgz",
"integrity": "sha1-UNFlGGiuYOzP8KLZ80WVN2vGsEE=",
"requires": {
"keypress": "0.1.x"
}
}
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1602858985920&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz",
@ -9479,8 +9717,7 @@
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-2.0.1.tgz",
"integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I=",
"dev": true
"integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I="
},
"progress": {
"version": "2.0.3",
@ -9735,7 +9972,6 @@
"version": "2.3.7",
"resolved": "https://registry.npm.taobao.org/readable-stream/download/readable-stream-2.3.7.tgz",
"integrity": "sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=",
"dev": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
@ -10146,8 +10382,7 @@
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1599054209520&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz",
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
"dev": true
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
},
"safe-regex": {
"version": "1.1.0",
@ -10369,8 +10604,7 @@
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1616491453441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
"dev": true
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0="
},
"send": {
"version": "0.17.1",
@ -10504,8 +10738,7 @@
"set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz",
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"dev": true
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
},
"set-value": {
"version": "2.0.1",
@ -10585,8 +10818,7 @@
"signal-exit": {
"version": "3.0.3",
"resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz",
"integrity": "sha1-oUEMLt2PB3sItOJTyOrPyvBXRhw=",
"dev": true
"integrity": "sha1-oUEMLt2PB3sItOJTyOrPyvBXRhw="
},
"simple-swizzle": {
"version": "0.2.2",
@ -11113,7 +11345,6 @@
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz",
"integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
"dev": true,
"requires": {
"safe-buffer": "~5.1.0"
}
@ -11913,8 +12144,7 @@
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
},
"util.promisify": {
"version": "1.0.1",
@ -12054,87 +12284,6 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
"integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995625950&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995297666&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
"integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
@ -12865,7 +13014,6 @@
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
"dev": true,
"requires": {
"string-width": "^1.0.2 || 2"
},
@ -12873,20 +13021,17 @@
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
},
"is-fullwidth-code-point": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
"dev": true,
"requires": {
"is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^4.0.0"
@ -12896,7 +13041,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
"ansi-regex": "^3.0.0"
}
@ -12958,8 +13102,7 @@
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.nlark.com/wrappy/download/wrappy-1.0.2.tgz?cache=0&sync_timestamp=1619133505879&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwrappy%2Fdownload%2Fwrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
},
"write": {
"version": "1.0.3",

View File

@ -10,6 +10,7 @@
"dependencies": {
"core-js": "^3.6.5",
"lodash": "^4.17.21",
"mitt": "^2.1.0",
"pinyin": "^2.9.0",
"vue": "^3.0.0",
"vue-router": "^4.0.8",

View File

@ -1,5 +1,7 @@
<template>
<div class="footer f16 ">
<div class="footer f16 "
@touchmove="move"
@touchend="end">
<div class="button" @click="refresh()">
<span v-if="!isRefresh" :class="{active:currentTab===1}">首页</span>
<img v-else src="../assets/img/icon/refresh.png" alt="" class="refresh">
@ -19,16 +21,24 @@
</template>
<script>
import {inject} from "vue";
export default {
name: "Footer",
props: ['initTab'],
data() {
return {
isRefresh: false,
currentTab: this.initTab
currentTab: this.initTab,
mitt: inject('mitt'),
}
},
methods: {
move(e) {
this.mitt.emit(this.$store.state.currentVideoId, e.touches[0].pageX)
},
end(e) {
},
tab(index) {
this.currentTab = index
switch (index) {

View File

@ -1,15 +1,15 @@
<template>
<div class="bg-video" v-bind:style="{'height':height+'px'}">
<video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="index === 0" loop>
<video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>
<p> 您的浏览器不支持 video 标签</p>
</video>
<div class="float-container" @click="togglePlayVideo($event)">
<div class="float-container" @click.stop="togglePlayVideo">
<transition name="pause">
<img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
@click.stop="togglePlayVideo($event)">
>
</transition>
<div class="float">
<div v-show="!isMove" class="normal">
<div :style="{opacity:isMove?0:1}" class="normal">
<div class="toolbar mb10p">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p"
@click.stop="$emit('goUserInfo')">
@ -50,8 +50,12 @@
@touchmove="move"
@touchend="end"
>
<div class="line" ref="line"></div>
<div class="point" ref="point"></div>
<div class="time" v-if="isMove">
<span class="playDuration">{{ $duration(playDuration) }}</span>
<span class="duration"> / {{ $duration(video.duration) }}</span>
</div>
<div class="line" :style="durationStyle" ref="line"></div>
<div class="point" :style="durationStyle" ref="point"></div>
</div>
</div>
</div>
@ -60,6 +64,8 @@
<script>
import {inject} from "vue";
export default {
name: "Video",
props: {
@ -68,19 +74,46 @@ export default {
default: () => {
return {}
}
},
disabled: {
type: Boolean,
default: () => {
return true
}
}
},
computed: {
durationStyle() {
// return {left: this.$store.state.playDuration + 'px'}
return {left: this.playDuration + 'px'}
}
},
watch: {
disabled: {
immediate: true,
handler(v) {
// console.log('disabled', this.currentVideoId, v)
this.isPlaying = !v
if (!v) {
this.$store.commit('setCurrentVideoId', this.currentVideoId)
}
}
}
},
data() {
return {
playDuration: 30,
index: 0,
height: 0,
width: 0,
isPlaying: true,
isPlaying: !this.disabled,
isCommenting: false,
isSharing: false,
line: null,
point: null,
isMove: false
isMove: false,
mitt: inject('mitt'),
currentVideoId: 'a' + Date.now()
}
},
mounted() {
@ -88,6 +121,10 @@ export default {
this.width = document.body.clientWidth
this.line = this.$refs.line
this.point = this.$refs.point
this.mitt.on(this.currentVideoId, e => {
console.log('mitt-test', e)
this.playDuration = e
})
},
methods: {
//
@ -122,6 +159,7 @@ export default {
} else {
video = el.previousSibling
}
video = this.$refs.video
if (video.paused) {
video.play()
} else {
@ -147,14 +185,15 @@ export default {
},
move(e) {
this.isMove = true
console.log('move',this.isMove)
this.$setCss(this.line, 'width', e.touches[0].pageX + 'px')
this.playDuration = e.touches[0].pageX
// this.$store.commit('setPlayDuration',e.touches[0].pageX)
// this.$setCss(this.line, 'width', e.touches[0].pageX + 'px')
// this.$setCss(this.point, 'left', e.touches[0].pageX + 'px')
this.stop(e)
},
end(e) {
this.isMove = false
console.log('end',this.isMove)
this.stop(e)
},
stop(e) {
e.stopImmediatePropagation()
@ -206,6 +245,7 @@ export default {
flex-direction: column;
.normal {
transition: all .3s;
position: relative;
.toolbar {
@ -282,11 +322,29 @@ export default {
.process {
//display: none;
//height: 20vh;
//width: 100vw;
height: 3px;
width: 100vw;
background: black;
position: fixed;
bottom: 60px;
position: relative;
//bottom: 60px;
.time {
position: absolute;
z-index: 9;
font-size: 24px;
bottom: 50px;
left: 0;
right: 0;
color: white;
text-align: center;
.duration {
color: darkgray;
}
}
&:before {
z-index: 9;
@ -304,7 +362,8 @@ export default {
position: absolute;
top: -3px;
height: 3px;
width: 10vw;
width: 100vw;
transform: translate3d(-100%, 0, 0);
background: white;
}

View File

@ -2,7 +2,7 @@ import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
import * as Vuex from 'vuex'
import App from './App.vue'
// import mitt from 'mitt'
import mitt from 'mitt'
import './assets/scss/index.scss'
import Index from './pages/home/Index.vue'
@ -39,12 +39,20 @@ const router = VueRouter.createRouter({
const store = Vuex.createStore({
state: {
pageAnim: 'none'
pageAnim: 'none',
playDuration: 60,
currentVideoId:null
},
mutations: {
setPageAnim(state, states) {
state.pageAnim = states
}
},
setPlayDuration(state, v) {
state.playDuration = v
},
setCurrentVideoId(state, v) {
state.currentVideoId = v
},
}
})
@ -84,11 +92,33 @@ const myMixin = {
},
$console(v) {
return console.log(JSON.stringify(v, null, 4))
},
$duration(v) {
let m = Math.floor(v / 60)
// let s = v % 60
let s = Math.round(v % 60)
let str = ''
if (m === 0) {
str = '00'
} else if (m > 0 && m < 10) {
str = '0' + m
} else {
str = m
}
str += ':'
if (s === 0) {
str += '00'
} else if (s > 0 && s < 10) {
str += '0' + s
} else {
str += s
}
return str
}
}
}
const app = Vue.createApp(App)
// app.provide('mitt',mitt())
app.provide('mitt',mitt())
app.component('BaseHeader', BaseHeader)
app.component('BaseSlideList', BaseSlideList)

View File

@ -145,6 +145,7 @@
<SlideItem>
<SlideList direction="column"
ref="slideList"
v-model:active-index="videoActiveIndex"
:virtual="true"
:total="total"
@end="end"
@ -152,6 +153,7 @@
@slide="slide">
<SlideItem :style="itemTop" v-for="(item,index) of videos">
<Video
:disabled="videoActiveIndex !== index"
v-model:video="videos[index]"
@showComments="isCommenting = !isCommenting"
@showShare="isSharing = !isSharing"
@ -238,7 +240,8 @@ export default {
isLoved: true,
loves: 1234,
comments: 666,
shared: 999
shared: 999,
duration:99
},
{
videoUrl: mp1,
@ -247,7 +250,8 @@ export default {
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
shared: 999,
duration:99
},
{
videoUrl: mp1,
@ -256,7 +260,8 @@ export default {
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
shared: 999,
duration:99
},
{
videoUrl: mp1,
@ -265,7 +270,8 @@ export default {
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
shared: 999,
duration:99
},
{
videoUrl: mp1,
@ -274,7 +280,8 @@ export default {
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
shared: 999,
duration:99
},
],
addCount: 0,
@ -283,6 +290,8 @@ export default {
isSharing: false,
baseActiveIndex: 0,
activeIndex: 2,
videoActiveIndex: 0,
tabWidth: 30,
tabIndexRelationActiveIndexLefts: [],
slideMoveXDistance: 0,

465
src/pages/home/Index2.vue Normal file
View File

@ -0,0 +1,465 @@
<template>
<div id="home-index">
<div class="toolbar-ctn">
<div class="toolbar" :style="toolbarStyle">
<div class="left">直播</div>
<div class="tab-ctn">
<div class="tabs" ref="tabs">
<div class="tab"><span>双流</span></div>
<div class="tab"><span>关注</span></div>
<div class="tab"><span>推荐</span></div>
</div>
<div class="index" :style="tabIndexStyle"></div>
</div>
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
</div>
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
<div class="loading" :style="loadingStyle">AA</div>
</div>
<SlideList v-model:active-index="baseActiveIndex">
<SlideItem>
<SlideList v-model:active-index="activeIndex"
>
<SlideItem style="overflow:auto;">
<div>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
<p>同城页</p>
</div>
</SlideItem>
<SlideItem>
<SlideList direction="column"
@end="end"
@first="first"
>
<SlideItem style="background: tan">
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
</SlideItem>
<SlideItem style="background: red;">
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
</SlideItem>
<SlideItem style="background: yellow">
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
</SlideItem>
</SlideList>
</SlideItem>
<SlideItem>
<SlideList direction="column"
ref="slideList"
:virtual="true"
:total="total"
@end="end"
@first="first"
@slide="slide">
<SlideItem :style="itemTop" v-for="(item,index) of videos">
<Video
v-model:video="videos[index]"
@showComments="isCommenting = !isCommenting"
@showShare="isSharing = !isSharing"
@goUserInfo="baseActiveIndex = 1"
></Video>
</SlideItem>
</SlideList>
</SlideItem>
</SlideList>
<Footer v-bind:init-tab="1"/>
</SlideItem>
<SlideItem style="font-size: 40px;overflow:auto;">
<div>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
<p>详情页</p>
</div>
</SlideItem>
</SlideList>
<Comment v-model:is-commenting="isCommenting"/>
<Share v-model:is-sharing="isSharing" ref="share"/>
</div>
</template>
<script>
import Comment from '../../components/Comment.vue'
import Other from '../../components/Other.vue'
import Share from '../../components/Share.vue'
import Footer from "../../components/Footer.vue"
import mp1 from '../../assets/video/吴三二的光年之外.mp4'
import src1Bg from '../../assets/img/poster/src1-bg.png'
import SlideItem from './SlideItem.vue'
import SlideList from './SlideList.vue'
import Video from "../../components/Video.vue";
export default {
name: "HomeIndex",
components: {Footer, Comment, Share, Other, SlideList, SlideItem, Video},
data() {
return {
list: [1, 2, 3, 4, 5],
videos: [
{
videoUrl: mp1,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: true,
loves: 1234,
comments: 666,
shared: 999
},
{
videoUrl: mp1,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
},
{
videoUrl: mp1,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
},
{
videoUrl: mp1,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
},
{
videoUrl: mp1,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
},
],
addCount: 0,
total: 10,
isCommenting: false,
isSharing: false,
baseActiveIndex: 0,
activeIndex: 2,
tabWidth: 30,
tabIndexRelationActiveIndexLefts: [],
slideMoveXDistance: 0,
slideMoveYDistance: 0,
height: 0,
width: 0,
toolbarStyleTransitionDuration: 0,
loading: false
}
},
computed: {
itemTop() {
return {top: this.addCount * 812 + 'px'}
},
tabIndexStyle() {
return {
width: `${this.tabWidth * 0.7}px`,
//slide emitmoveX
transform: `translate3d(${this.tabIndexRelationActiveIndexLefts[this.activeIndex]}px, 0, 0)`,
'transition-duration': '300ms',
}
},
toolbarStyle() {
return {
opacity: 1 - this.slideMoveYDistance / 20,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
}
},
noticeStyle() {
return {
opacity: this.slideMoveYDistance / 60,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
}
},
loadingStyle() {
if (this.loading) {
return {
opacity: 1,
'transition-duration': '300ms',
}
}
if (this.slideMoveYDistance !== 0) {
return {
opacity: this.slideMoveYDistance / 60,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
}
}
}
},
mounted() {
let tabs = this.$refs.tabs
// let tabWidth = this.$getCss(tabs, 'width')
for (let i = 0; i < tabs.children.length; i++) {
let item = tabs.children[i]
this.tabWidth = this.$getCss(item, 'width')
this.tabIndexRelationActiveIndexLefts.push(
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + this.tabWidth * 0.15)
}
this.height = document.body.clientHeight
this.width = document.body.clientWidth
},
methods: {
end() {
if (this.slideMoveYDistance > 60) {
this.getData()
}
this.slideMoveYDistance = 0;
this.toolbarStyleTransitionDuration = 300
},
first(e) {
if (this.loading) return
this.slideMoveYDistance = e
this.toolbarStyleTransitionDuration = 0
},
getData() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 1500)
},
slide(e) {
let {currentSlideItemIndex, isDrawDown} = e
if (isDrawDown) {
if (this.list.length - 3 < currentSlideItemIndex && currentSlideItemIndex + 2 < this.total) {
this.list.push(currentSlideItemIndex + 3)
setTimeout(() => {
this.addCount += 1
this.list.shift()
}, 300)
this.$refs.slideList.checkChildren()
}
} else {
if (currentSlideItemIndex > 1 && currentSlideItemIndex + 3 < this.total) {
this.list.pop()
setTimeout(() => {
this.addCount -= 1
this.list.unshift(currentSlideItemIndex - 1)
}, 300)
this.$refs.slideList.checkChildren()
}
}
},
},
created() {
},
}
</script>
<style scoped lang="scss">
#home-index {
height: 100%;
width: 100%;
position: relative;
.toolbar-ctn {
position: fixed;
font-size: 1.6rem;
top: 0;
left: 0;
height: 60px;
z-index: 2;
width: 100%;
color: white;
.notice {
opacity: 0;
top: 0;
position: absolute;
width: 100vw;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loading {
opacity: 0;
top: 20px;
right: 15px;
position: absolute;
}
.toolbar {
position: relative;
color: white;
//background: #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
//display: none;
.tab-ctn {
width: 40%;
position: relative;
.tabs {
display: flex;
justify-content: space-between;
}
.index {
position: absolute;
bottom: -8px;
height: 3px;
background: #fff;
border-radius: 5px;
}
}
}
}
}
</style>