Skip to content

B
best-code
Commit 3af3c9f7 authored by Friends233's avatar Friends233
Browse files
Options

弹幕

parent cc82f5a5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 460 additions and 26 deletions
README.md
View file @ 3af3c9f7
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
**微信授权：location.origin + "/wechat/access?apk=" + CFG.appKey + "&dbredirect=" + encodeURIComponent(CFG.share)** **微信授权：location.origin + "/wechat/access?apk=" + CFG.appKey + "&dbredirect=" + encodeURIComponent(CFG.share)**
**兑吧积分商城订单列表（模拟后台 2584 有数据）：**http://activity.m.duibatest.com.cn/taw/innerPage/orderListPage?status=0&category=
#### 常用代码 #### 常用代码
**埋点：[MD](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/MD.js)** **埋点：[MD](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/MD.js)**
...@@ -36,3 +38,4 @@ ...@@ -36,3 +38,4 @@
**视频播放：**[**dpplayer**](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/src/pages/homeDemo/homeDemo.jsx) **视频播放：**[**dpplayer**](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/src/pages/homeDemo/homeDemo.jsx)
**弹幕：**[**barrage**](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/src/components/barrage/barrage.jsx)
dist/index.html 0 → 100644
View file @ 3af3c9f7
<!doctype html><html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="dns-prefetch" href="//yun.duiba.com.cn"/><link rel="preconnect" href="//embedlog.duiba.com.cn"><title>活动标题</title><script>if (localStorage && localStorage.isWebp) {
document
.getElementsByTagName('html')[0]
.setAttribute('duiba-webp', 'true');
}</script><script src="//yun.duiba.com.cn/spark/v2/spark.base.fz.wxpollyfill.js"></script><script src="//yun.duiba.com.cn/js-libs/rem/1.1.3/rem.min.js"></script><script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script><script>"use strict";
var CFG = CFG || {};
CFG.projectId = location.pathname.split('/')[2] || '1';
function getUrlParam(name) {
var search = window.location.search;
var matched = search.slice(1).match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'));
return search.length ? matched && matched[2] : null;
}
CFG.appID = '${APPID}';
if (!getUrlParam("appID")) {
// alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
}</script><link href="//yun.duiba.com.cn/spark/v2/temp_base/1679469216438/styles/vendors.6668908a7e14662e4279.css" rel="stylesheet"><link href="//yun.duiba.com.cn/spark/v2/temp_base/1679469216438/styles/main.6668908a7e14662e4279.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="//yun.duiba.com.cn/spark/v2/temp_base/1679469216438/js/runtime-main.bef99dea.js" crossorigin="anonymous"></script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1679469216438/js/vendors.7e84423f.js" crossorigin="anonymous"></script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1679469216438/js/main.44e8f840.js" crossorigin="anonymous"></script></body></html>
\ No newline at end of file
dist/js/main.44e8f840.js 0 → 100644
View file @ 3af3c9f7
This diff is collapsed.
dist/js/main.44e8f840.js.map 0 → 100644
View file @ 3af3c9f7
This diff is collapsed.
dist/js/runtime-main.bef99dea.js 0 → 100644
View file @ 3af3c9f7
!function(e){function r(r){for(var n,a,l=r[0],i=r[1],p=r[2],c=0,s=[];c<l.length;c++)a=l[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="//yun.duiba.com.cn/spark/v2/temp_base/1679469216438/";var l=window.webpackJsonp=window.webpackJsonp||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var p=0;p<l.length;p++)r(l[p]);var f=i;t()}([]);
//# sourceMappingURL=runtime-main.bef99dea.js.map
\ No newline at end of file
dist/js/runtime-main.bef99dea.js.map 0 → 100644
View file @ 3af3c9f7
{"version":3,"sources":["webpack:///webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice"],"mappings":"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","file":"js/runtime-main.bef99dea.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"//yun.duiba.com.cn/spark/v2/temp_base/1679469216438/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}
\ No newline at end of file
dist/js/vendors.7e84423f.js 0 → 100644
View file @ 3af3c9f7
This diff is collapsed.
dist/js/vendors.7e84423f.js.map 0 → 100644
View file @ 3af3c9f7
This diff is collapsed.
dist/styles/main.6668908a7e14662e4279.css 0 → 100644
View file @ 3af3c9f7
*{margin:0;padding:0}body,html{font-size:.24rem;width:100%;height:100%;-webkit-text-size-adjust:100%!important;-ms-text-size-adjust:100%!important;text-size-adjust:100%!important;-moz-text-size-adjust:100%!important}.modal-hoc-bg{position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0,0,0,.8);z-index:1000}.loadingDemo{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.loadingDemo,.loadingDemo .bg174{width:7.5rem;height:16.24rem;left:0;position:absolute}.loadingDemo .bg174{top:0;background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/loadingDemo/%E8%83%8C%E6%99%AF.jpg) no-repeat 0 0/100% 100%}[duiba-webp=true] .loadingDemo .bg174{background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/loadingDemo/%E8%83%8C%E6%99%AF.jpg?x-oss-process=image%2Fformat%2Cwebp) no-repeat 0 0/100% 100%}.loadingDemo .progressBar{width:5.24rem;height:.22rem;left:1.13rem;top:7.17rem;position:absolute;overflow:hidden;border-radius:.06rem}.loadingDemo .progressBar .atBottom{width:5.24rem;height:.22rem;left:0;top:0;position:absolute;background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/loadingDemo/%E5%BA%95%E9%83%A8173.png) no-repeat 0 0/100% 100%}[duiba-webp=true] .loadingDemo .progressBar .atBottom{background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/loadingDemo/%E5%BA%95%E9%83%A8173.png?x-oss-process=image%2Fformat%2Cwebp) no-repeat 0 0/100% 100%}.loadingDemo .progressBar .loadingBg{width:5.16rem;height:.14rem;left:.05rem;top:.04rem;overflow:hidden;position:absolute;border-radius:.06rem}.loadingDemo .progressBar .above{display:block;position:relative;width:5.16rem;height:.14rem;background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/loadingDemo/%E4%B8%8A%E9%9D%A2.png) no-repeat 0 0/100% 100%;border-radius:.06rem}[duiba-webp=true] .loadingDemo .progressBar .above{background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/loadingDemo/%E4%B8%8A%E9%9D%A2.png?x-oss-process=image%2Fformat%2Cwebp) no-repeat 0 0/100% 100%}.loadingDemo .inLoad{width:1.17rem;height:.23rem;left:3.22rem;top:7.58rem;position:absolute;font-size:.24rem;line-height:.23rem;color:#fff}@-webkit-keyframes loading{0%{-webkit-transform:translateX(-5.2rem);transform:translateX(-5.2rem)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes loading{0%{-webkit-transform:translateX(-5.2rem);transform:translateX(-5.2rem)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.homeDemo .test-btn-wrp{position:absolute;width:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;left:1.5rem;color:red}.homeDemo>div{position:relative;margin-top:.1rem}.homeDemo>div p{font-size:.43rem;color:#00f}.homeDemo .Circel{width:3rem}.homeDemo .Circel,.homeDemo .video-js{height:3rem;margin-left:1rem;position:relative}.homeDemo .video-js{width:5rem}.homeDemo .barrage-wrp{width:100%;height:2rem;position:relative}.homeDemo .barrage-wrp .bar-s{font-size:.24rem;color:#fff;padding:.12rem .42rem;border-radius:.3rem;background-image:-webkit-gradient(linear,left top,right top,from(#bba6ff),to(#8eb3ff));background-image:linear-gradient(90deg,#bba6ff,#8eb3ff);-webkit-box-sizing:content-box;box-sizing:content-box;white-space:nowrap}.circel-wrp,.circel-wrp .circel-con{width:100%;height:100%}.barrage-wrapper{width:100%;height:100%}.barrage-wrapper,.barrage-wrapper .barrage{left:0;top:0;position:absolute}.ruleStyle{overflow-x:hidden;overflow-y:scroll;word-break:break-all}.col-center{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@-webkit-keyframes btnBreathAni{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(1);transform:scale(1)}75%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes btnBreathAni{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(1);transform:scale(1)}75%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes upShowAni{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes upShowAni{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes rotateAni{0%{-webkit-transform:rotateY(0deg) scale(0);transform:rotateY(0deg) scale(0)}to{-webkit-transform:rotateY(1turn) scale(1);transform:rotateY(1turn) scale(1)}}@keyframes rotateAni{0%{-webkit-transform:rotateY(0deg) scale(0);transform:rotateY(0deg) scale(0)}to{-webkit-transform:rotateY(1turn) scale(1);transform:rotateY(1turn) scale(1)}}.rotaryDraw{width:7.5rem;height:9.96rem;left:0;top:.8rem;position:absolute;background-color:rgba(0,0,0,.5);overflow:hidden}.rotaryDraw .rotaryTableContent{width:7.5rem;height:7.34rem;left:0;top:1.52rem;position:absolute}.rotaryDraw .rotaryTableContent .atEndLight{width:7.5rem;height:16.24rem;left:0;top:-5rem;position:absolute}.rotaryDraw .rotaryTableContent .turntable{width:7.13rem;height:7.13rem;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;z-index:99}.rotaryDraw .rotaryTableContent .turntable .bg{width:7.13rem;height:7.13rem;left:0;top:0;position:absolute;-webkit-transform:rotate(29deg);transform:rotate(29deg);background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/%E8%BD%AC%E7%9B%98%E6%8A%BD%E5%A5%96/%E6%8A%BD%E5%A5%96%E8%83%8C%E6%99%AF.png) no-repeat 0 0/100% 100%}.rotaryDraw .rotaryTableContent .turntable .start-button{width:1.07rem;height:1.3rem;background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/%E8%BD%AC%E7%9B%98%E6%8A%BD%E5%A5%96/%E6%8A%BD%E5%A5%96.png) no-repeat 0 0/100% 100%;top:-.1rem!important}.rotaryDraw .rotaryTableContent .turntable .option{width:1.3rem;height:1.1rem;-webkit-transform:rotate(8deg);transform:rotate(8deg)}.rotaryDraw .rotaryTableContent .turntable .option .option-icon{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:.6rem;height:.6rem}.rotaryDraw .rotaryTableContent .turntable .option .option-name{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:.6rem;display:block;width:100%;text-align:center;font-size:.24rem}.rotaryDraw .text{width:6.67rem;height:9.3rem;left:.42rem;top:0;position:absolute}.rotaryDraw .text .mainTitle{width:6.67rem;height:2.02rem;left:0;top:0;position:absolute;background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/%E8%BD%AC%E7%9B%98%E6%8A%BD%E5%A5%96/%E4%B8%BB%E6%A0%87%E9%A2%98.png) no-repeat 0 0/100% 100%}.rotaryDraw .text .remainingTimes{left:0;top:8.3rem;text-align:center}.rotaryDraw .text .remainingTimes,.rotaryDraw .text .tips{width:100%;height:.74rem;position:absolute;font-size:.32rem;color:#fff}.rotaryDraw .text .tips{left:.26rem;top:8.85rem}.rotaryDraw .text .primaryText{font-size:.41rem;color:#fff}.rotaryDraw .shutDown{width:.43rem;height:.43rem;left:3.53rem;top:9.55rem;position:absolute;background:url(//yun.duiba.com.cn/spark/v2/temp_base/1667372148019/%E8%BD%AC%E7%9B%98%E6%8A%BD%E5%A5%96/%E5%85%B3%E9%97%AD.png) no-repeat 0 0/100% 100%;z-index:99}.rotaryDraw .disk-turntable .tt_wrapper .tt_start-button{position:absolute;left:50%;top:2.8rem!important;-webkit-transform:translateX(-50%)!important;transform:translateX(-50%)!important}.rotaryDraw .disk-turntable .tt_wrapper .tt_fan .tt_options .tt_option .tt_option-wrapper{left:.2rem!important;position:absolute;bottom:0}.rotaryDraw .disk-turntable .tt_wrapper .tt_fan .tt_options .tt_option:first-child .tt_option-wrapper{left:.2rem!important}.KCollectAni{position:fixed;top:0;left:0;right:0;bottom:0;opacity:1}.KCollectAni img{position:absolute;-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-duration:.3s;transition-duration:.3s}.collect-wrapper{width:100%;height:7.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.collect-wrapper .start{width:1rem;height:1rem;background-color:#0ff;margin-top:1rem}.collect-wrapper .end{width:1rem;height:1rem;background-color:#0b2d2d;margin-top:2rem;color:#fff}.Marquee{width:3rem;height:1rem}.prize-swiper{margin-top:.72rem}.prize{width:100%}.prize .bg-box{margin:auto;display:block;width:1.46rem;height:1.46rem;border-radius:.15rem;-o-object-fit:contain;object-fit:contain}.prize .font{margin:.1rem auto;display:block;width:1.46rem;text-align:center;font-size:.24rem;color:#018e7c;overflow:hidden;text-overflow:ellipsis;padding:0 .05rem;-webkit-box-sizing:border-box;box-sizing:border-box}.BetterList{width:100%;height:5rem;position:fixed;top:3rem;background-color:#faebd7;overflow:hidden}.BetterList .c-content{background-color:#f0f8ff}.BetterList .c-content .act-i{height:2rem;background-color:bisque}.BetterList .c-content>div{height:1rem;line-height:1rem;text-align:center;background-color:#0ff}.BetterList .c-content>div:nth-child(n+1){margin-top:.3rem}
\ No newline at end of file
dist/styles/vendors.6668908a7e14662e4279.css 0 → 100644
View file @ 3af3c9f7
@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, 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");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{-webkit-transform:translateZ(0);transform:translateZ(0)}.swiper-pointer-events{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-pointer-events.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(transparent));background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(transparent));background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(transparent));background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(transparent));background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper:before{content:"";-ms-flex-negative:0;flex-shrink:0;-webkit-box-ordinal-group:10000;-ms-flex-order:9999;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}
\ No newline at end of file
loc.json
View file @ 3af3c9f7
{"numOfComponents":1259,"numOfProject":1597} {"numOfComponents":1259,"numOfProject":1809}
\ No newline at end of file \ No newline at end of file
sparkrc.js
View file @ 3af3c9f7
...@@ -10,5 +10,5 @@ module.exports ={ ...@@ -10,5 +10,5 @@ module.exports ={
"IMAGE_Q2": 0.8, "IMAGE_Q2": 0.8,
"RES_PATH": "/src/assets/", "RES_PATH": "/src/assets/",
"RES_PATH_PROD": "//yun.duiba.com.cn/spark/v2/temp_base/1667372148019", "RES_PATH_PROD": "//yun.duiba.com.cn/spark/v2/temp_base/1667372148019",
"JS_PATH_PROD": "https://yun.duiba.com.cn/spark/v2/temp_base/1675238524625/js" "JS_PATH_PROD": "https://yun.duiba.com.cn/spark/v2/temp_base/1679469216438/js"
} }
\ No newline at end of file
src/components/barrage/barrage.jsx 0 → 100644
View file @ 3af3c9f7
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './barrage.less';
/**
* 等待一段时间
* @param {number} time 等待的时间ms
*/
function WaitTime(time) {
return new Promise(resolve => setTimeout(resolve, time))
}
/**
* 设置元素style
* @param {object} option 配置
* @param {HTMLElement} option.element HTMLElement
* @param {object} option.style element.style
* @param {Function} [option.onTransitionEnd] transitionend回调
* @param {Function} [option.onAnimationEnd] animationend回调
*/
function SetElementStyle({ element, style, onTransitionEnd, onAnimationEnd }) {
const { transition, animation } = style;
if (transition !== undefined) element.style.transition = transition;
if (animation !== undefined) element.style.animation = animation;
setTimeout(() => {
Object.keys(style).forEach(v => {
if (v != 'transition' && v != 'animation') {
element.style[v] = style[v];
}
});
})
if (onTransitionEnd) {
element.removeEventListener('transitionend', onTransitionEnd);
element.addEventListener('transitionend', onTransitionEnd);
}
if (onAnimationEnd) {
element.removeEventListener('animationend', onAnimationEnd);
element.addEventListener('animationend', onAnimationEnd);
}
}
@observer
class Barrage extends React.Component {
constructor(props) {
super(props);
const {
num = 2,// 数量，每一次同时出现几行
// 数据
data = [],
// render方法
renderLine
} = props
this.state = {
/** 弹幕内容 */
barrageData: new Array(num).fill(''),
};
}
/** 弹幕节点列表 */
barrageList = [];
componentDidMount() {
setTimeout(() => {
const { data = [] } = this.props
this.setBarrage(data);
}, 100);
}
/** 设置弹幕 */
setBarrage = async (data) => {
/** 设置弹幕文字方法 */
const setMsg = (i) => {
const getPrizeName = data || [];
const index = Math.floor(Math.random() * getPrizeName.length);
const content = getPrizeName[index];
this.state.barrageData[i] = content;
this.setState({
barrageData: this.state.barrageData,
});
};
/** 跑弹幕方法 */
const runNode = (node, i) => {
const dom = node;
const domWidth = dom.getClientRects()[0].width;
const fz = Number(document.documentElement.style.fontSize.replace('px', ''));
const width = domWidth / fz;
SetElementStyle({
element: node,
style: {
transition: `transform ${10 - 1 * i}s linear`,
transform: `translateX(${-7.5 - width}rem)`,
},
});
};
// 启动弹幕
this.barrageList.forEach((node, i) => {
setMsg(i);
runNode(node, i);
node.addEventListener('transitionend', async () => {
SetElementStyle({
element: node,
style: {
transition: '',
transform: '',
},
});
setMsg(i);
await WaitTime(100);
runNode(node, i);
});
});
};
render() {
const { barrageData } = this.state;
const {
renderLine = (data) => {
return <div>{data}</div>
}
} = this.props
return (
<div
className="barrage-wrapper"
>
{barrageData.map((v, i) => {
return (
<div
id="c-barrage"
className="barrage c-barrage"
key={i}
style={{
left: `${7.5}rem`,
top: `${1 * i}rem`,
}}
ref={(ref) => (this.barrageList[i] = ref)}
>
{renderLine(v)}
</div>
);
})}
</div>
);
}
}
export default Barrage;
src/components/barrage/barrage.less 0 → 100644
View file @ 3af3c9f7
@import "../../res.less";
.barrage-wrapper {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
.barrage {
position: absolute;
left: 0;
top: 0;
}
}
src/components/openBox/index.jsx → src/components/openBox/openBox.jsx
View file @ 3af3c9f7
...@@ -5,44 +5,44 @@ import modalStore from "@src/store/modal"; ...@@ -5,44 +5,44 @@ import modalStore from "@src/store/modal";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { RES_PATH } from "../../../sparkrc"; import { RES_PATH } from "../../../sparkrc";
import './index.less' import './openBox.less';
const OpenBox = () => { const OpenBox = () => {
const { boxState } = store const { boxState } = store;
let drawInfo = null let drawInfo = null;
useEffect(() => { useEffect(() => {
drawPrize() drawPrize();
}, []) }, []);
/** 进入抽奖 */ /** 进入抽奖 */
const drawPrize = async () => { const drawPrize = async () => {
const res = await API.drawPrize({ drawType: boxState ? '1' : '2' }) const res = await API.drawPrize({ drawType: boxState ? '1' : '2' });
if (res && res.success) { if (res && res.success) {
drawInfo = res.data drawInfo = res.data;
} else { } else {
// 接口报错关闭弹窗 // 接口报错关闭弹窗
setTimeout(() => { setTimeout(() => {
store.getHomeData() store.getHomeData();
modalStore.closePop('OpenBox') modalStore.closePop('OpenBox');
}, 1000); }, 1000);
} }
} };
/** 动画播放中 */ /** 动画播放中 */
const onProcess = async (currentFrame) => { const onProcess = async (currentFrame) => {
// 抽奖请求结束关闭弹窗 // 抽奖请求结束关闭弹窗
if (currentFrame >= 70 && drawInfo) { if (currentFrame >= 70 && drawInfo) {
modalStore.closePop('OpenBox') modalStore.closePop('OpenBox');
modalStore.pushPop('Getprize', drawInfo) modalStore.pushPop('Getprize', drawInfo);
} }
} };
return <div className="openbox"> return <div className="openbox">
{boxState ? {boxState ?
<SvgaPlayer className="bigbox-svga" onProcess={onProcess} src={RES_PATH + 'svga/bigbox.svga'} /> : <SvgaPlayer className="bigbox-svga" onProcess={onProcess} src={RES_PATH + 'svga/bigbox.svga'} /> :
<SvgaPlayer className="smailbox-svga" onProcess={onProcess} src={RES_PATH + 'svga/smailbox.svga'} />} <SvgaPlayer className="smailbox-svga" onProcess={onProcess} src={RES_PATH + 'svga/smailbox.svga'} />}
</div> </div>;
} };
export default observer(OpenBox) export default observer(OpenBox);
\ No newline at end of file \ No newline at end of file
src/pages/homeDemo/homeDemo.jsx
View file @ 3af3c9f7
...@@ -10,6 +10,7 @@ import store from '@src/store'; ...@@ -10,6 +10,7 @@ import store from '@src/store';
import { all_page } from '@src/utils/constants'; import { all_page } from '@src/utils/constants';
import Circel from '@src/components/Circel'; import Circel from '@src/components/Circel';
import DPlayer from 'dplayer'; import DPlayer from 'dplayer';
import Barrage from '@src/components/barrage/barrage';
@observer @observer
class HomeDemo extends React.Component { class HomeDemo extends React.Component {
...@@ -18,7 +19,7 @@ class HomeDemo extends React.Component { ...@@ -18,7 +19,7 @@ class HomeDemo extends React.Component {
this.ctx = React.createRef() this.ctx = React.createRef()
} }
componentDidMount(){ componentDidMount() {
this.initVideo() this.initVideo()
} }
...@@ -60,7 +61,7 @@ class HomeDemo extends React.Component { ...@@ -60,7 +61,7 @@ class HomeDemo extends React.Component {
} }
return ( return (
<div className="homeDemo"> <div className="homeDemo">
<p>下方点击查看详情</p>
{all_page.map(({ name, page }) => { {all_page.map(({ name, page }) => {
console.log(name, page) console.log(name, page)
return <div key={name + page}> return <div key={name + page}>
...@@ -90,6 +91,21 @@ class HomeDemo extends React.Component { ...@@ -90,6 +91,21 @@ class HomeDemo extends React.Component {
<br /> <br />
<div ref={node => this.videoNode = node} id="my-player" className="video-js"></div> <div ref={node => this.videoNode = node} id="my-player" className="video-js"></div>
</div> </div>
<div>
<p>通用弹幕:</p>
<br />
<div className='barrage-wrp'>
<Barrage
num={2}
data={Array(10).fill('弹幕弹幕').map((_, i) => {
return _ + i
})}
renderLine={(data) => {
return <div className='bar-s'>{data}</div>
}}
/>
</div>
</div>
</div> </div>
); );
} }
......
src/pages/homeDemo/homeDemo.less
View file @ 3af3c9f7
...@@ -29,4 +29,19 @@ ...@@ -29,4 +29,19 @@
margin-left: 100px; margin-left: 100px;
position: relative; position: relative;
} }
.barrage-wrp{
width: 100%;
height: 200px;
position: relative;
.bar-s{
font-size: 24px;
// line-height: 24px;
color: #ffffff;
padding: 12px 42px;
border-radius: 30px;
background-image: linear-gradient(90deg, rgb(187, 166, 255) 0%, rgb(142, 179, 255) 100%);
box-sizing: content-box;
white-space: nowrap;
}
}
} }
src/res.less
View file @ 3af3c9f7
...@@ -89,13 +89,13 @@ ...@@ -89,13 +89,13 @@
animation: scale 1s forwards; animation: scale 1s forwards;
@keyframes scale { @keyframes scale {
0% { 0% {
transform: translateY(-55%) scale(0); transform: translateY(-50%) scale(0);
} }
80% { 80% {
transform: translateY(-55%) scale(1.05); transform: translateY(-50%) scale(1.05);
} }
100% { 100% {
transform: translateY(-55%) scale(1); transform: translateY(-50%) scale(1);
} }
} }
} }
......
src/store/custom.js
View file @ 3af3c9f7
import { Toast } from "@spark/ui";
import API from "@src/api" import API from "@src/api"
import { addLoading } from "@src/utils/utils" import { addLoading } from "@src/utils/utils"
...@@ -5,6 +6,20 @@ export default { ...@@ -5,6 +6,20 @@ export default {
/** 首页数据 */ /** 首页数据 */
homeInfo:{}, homeInfo:{},
/** 是否处于活动状态 */
isActivi() {
const { actStartTime, actEndTime, currentTime } = this.homeInfo;
if (currentTime < actStartTime) {
Toast('活动未开始~', 2000, { hideOthers: true });
return false;
}
if (currentTime >= actEndTime) {
Toast('活动已结束~~', 2000, { hideOthers: true });
return false;
}
return true;
},
/** 设置首页数据 */ /** 设置首页数据 */
setHomeInfo(data){ setHomeInfo(data){
this.homeInfo = data this.homeInfo = data
......
src/utils/utils.js
View file @ 3af3c9f7
/* /*
* @Author: all * @Author: all
* @Date: 2021-11-01 09:30:00 * @Date: 2021-11-01 09:30:00
* @LastEditTime: 2023-03-20 11:25:59 * @LastEditTime: 2023-03-20 11:29:19
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: * @Description:
*/ */
...@@ -381,7 +381,11 @@ const onCtrScroll = (flag = true) => { ...@@ -381,7 +381,11 @@ const onCtrScroll = (flag = true) => {
} }
} }
/** 添加一个loading */ /**
* 添加一个loading
* @param {*} fn 异步方法
* @returns
*/
export const addLoading = async (fn) => { export const addLoading = async (fn) => {
let res = null let res = null
try { try {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment