Skip to content

Y
yucheng_code
Commit 42c3a10a authored by 余成's avatar 余成
Browse files
Options

使用组件

parent d5c8510c
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 0 deletions
public/index.html 0 → 100644
View file @ 42c3a10a
<!DOCTYPE html>
<html lang="zh">
<script>
(function () {
var INVITE_CODE = 'inviteCode';
var url = new URL(location.href);
// 获取邀请码
var inviteCode = url.searchParams.get(INVITE_CODE)
if (inviteCode) {
//存储邀请码
sessionStorage.setItem(INVITE_CODE, inviteCode)
// 重置url
url.searchParams.delete(INVITE_CODE)
location.href = url.href
}
})()
</script>
<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">
<title>拆盲盒-首页</title>
<style>
body {
/* background-color: #F87241; */
}
</style>
<script src="https://yun.duiba.com.cn/db_games/debug/vconsole.min.js"></script>
<script>
//new VConsole();
</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>
</head>
<body>
<script>
var CFG = {}
console.log('CFG:', CFG)
</script>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
public/qplib.js 0 → 100644
View file @ 42c3a10a
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Qplib = {}));
})(this, (function (exports) { 'use strict';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var version = "1.0.3";
console.log('qplib v' + version);
var DEFAULT_COMPOSE_OPTIONS = {
stylePrefix: 's_',
variablePrefix: 'v_',
injectClassPrefix: 'i-',
classDotReplacer: '$',
};
function compose(configs, options) {
if (options === void 0) { options = {}; }
var _options = __assign({}, DEFAULT_COMPOSE_OPTIONS, options);
var keys = Object.keys(configs);
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
var group = configs[key];
injectVariable(group, _options);
}
}
function injectVariable(group, options) {
// 初始化自定义变量
var styleInnerHTML = '';
var classes = {};
for (var key in group) {
if (key.indexOf(options.variablePrefix) === 0) {
styleInnerHTML += ('--' + key.replace(options.variablePrefix, '') + ': ' + parsePropValue(group[key]) + ';\n');
}
else if (key.indexOf(options.stylePrefix) === 0) {
var selector = key.replace(options.stylePrefix, '');
var arr = selector.split(options.classDotReplacer);
var name_1 = arr[0];
var prop = arr[1];
var classProps = classes[name_1];
if (!classProps) {
classProps = classes[name_1] = {};
}
var propValue = group[key];
if (prop) {
classProps[prop] = propValue;
}
else if (typeof propValue === 'object') {
__assign(classProps, propValue);
}
}
}
console.log('classes:', classes);
var styleEle = document.createElement('style');
styleEle.type = 'text/css';
styleEle.innerHTML = ':root {' + styleInnerHTML + '}';
document.head.append(styleEle);
var classesInnerHTML = '';
for (var className in classes) {
classesInnerHTML += '.' + options.injectClassPrefix + className + '{\n';
var classProps = classes[className];
for (var propName in classProps) {
var propValue = classProps[propName];
var wrapperPropValue = parsePropValue(propValue) + (propName === 'background' ? ' no-repeat top left / 100% 100%' : '');
classesInnerHTML += propName + ':' + wrapperPropValue + ' !important;';
classesInnerHTML += '\n';
}
classesInnerHTML += '}\n\n';
}
var classesEle = document.createElement('style');
classesEle.type = 'text/css';
classesEle.innerHTML = classesInnerHTML;
document.head.append(classesEle);
}
function parsePropValue(propValue) {
return typeof propValue === 'number' ? (propValue / 100) + 'rem' :
likeLink(propValue) ? 'url("' + propValue + '")' :
propValue;
}
var imageExtnames = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'bmp'];
function likeLink(value) {
return typeof value === 'string' &&
(value.indexOf('//') === 0 ||
value.indexOf('http') === 0 ||
imageExtnames.indexOf(value.substring(value.lastIndexOf('.') + 1)) >= 0);
}
exports.compose = compose;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=qplib.js.map
public/share.html 0 → 100644
View file @ 42c3a10a
<!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">
<title>拆盲盒-分享页</title>
<style>
body {
/* background-color: #F87241; */
}
</style>
<script src="https://yun.duiba.com.cn/db_games/debug/vconsole.min.js"></script>
<script>
//new VConsole();
</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="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
var CFG = {}
console.log('CFG:', CFG)
</script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
src/assetList.json 0 → 100644
View file @ 42c3a10a
{"preLoadImg":[],"asyncLoadImg":[]}
\ No newline at end of file
src/fontSvg/index.jsx 0 → 100644
View file @ 42c3a10a
import React,{ useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import './index.less'
export default function FontSvg(props) {
const mode = 1
console.log('props: ', props);
const offset =props?.offset || 10;
const camber =props?.camber || 40
const fistSpace =props?.fistSpace || 1
const lastSpace =props?.lastSpace || 1
const d = {
startX: 0+offset,
startY: camber,
centerX:192.5,
centerY: 0,
endY: camber,
endX: 385-offset,
}
let targetStr = '',targetStrLength = 0,centerNum = 0
const textPathRef = useRef()
let [fontSize,setFontSize] =useState(23)
if(mode == 1) {
useEffect(()=>{
const textContentArr = ('活动时间:'+ props.activityTime).split('')
const targetTextArr = [].concat(Array(fistSpace).fill(' '),textContentArr,Array(lastSpace).fill(' '))
console.log('textContentArr: ', targetTextArr.length);
var textPath = textPathRef.current
textPath.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', '#circle');
textPath.textContent = targetTextArr.join('');
},[props.activityTime])
}else {
targetStr ='活动时间:'+ props.activityTime
targetStrLength = targetStr.length
centerNum = Math.floor(targetStrLength/2)
}
console.log('centerNum',centerNum,targetStrLength)
return (
mode == 1 ?
<div className={classnames('circular',props.className)}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385 90">
<path d={`M${d.startX} ${d.startY} Q ${d.centerX} ${d.centerY} ${d.endX} ${d.endY}`} id="circle"/>
<text id="text" >
<textPath style={{fontSize:`${fontSize}px`}} ref={textPathRef} id="textPath"></textPath>
</text>
</svg>
</div>:
<div className={classnames('cssRote',props.className)}>
{targetStr.split('').map((item,index)=>{
return <span className={classnames('item',item && index>centerNum?`right_${index-centerNum}deg`:index==centerNum? 'center':`left_${centerNum-index}deg`)} key={index}>{item}</span>
})}
</div>
)
}
\ No newline at end of file
src/fontSvg/index.less 0 → 100644
View file @ 42c3a10a
.circular {
display:flex;
justify-content:center;
top: 505px!important;
position: absolute;
left: 49%;
transform: translateX(-50%);
width: 385px;
height: 90px;
svg {
display: block;
overflow: visible;
}
text {
fill: #fff;
font-size: 24px;
width: 385px;
text-align: center;
textPath {
// font-size: 37px;
text-align: center;
white-space: pre;
}
}
path {
// fill: red;
fill: transparent;
width: 385px;
}
}
.cssRote {
display:flex;
justify-content:center;
top: 520px!important;
position: absolute;
left: 49%;
transform: translateX(-50%);
width: 385px;
height: 90px;
color: #fff;
.center {
transform: translateY(-20px);
}
.item {
// margin: 0 1px;
}
}
@right: {
1deg: 20px;
2deg: 19px;
3deg: 18px;
4deg: 17px;
5deg: 16px;
6deg: 15px;
7deg: 14px;
8deg: 13px;
9deg: 12px;
10deg: 11px;
11deg: 10px;
12deg: 9px;
13deg: 8px;
14deg: 7px;
15deg: 6px;
16deg: 5px;
17deg: 4px;
18deg: 3px;
19deg: 2px;
20deg: 1px;
21deg: 0px;
};
each(@right, {
.right_@{key} {
transform: translateY(-@value) rotate(@key);
}
})
.left_1deg {
transform: translateY(-20px) rotate(-1deg);
}
.left_2deg {
transform: translateY(-19px) rotate(-2deg);
}
.left_3deg {
transform: translateY(-19px) rotate(-2deg);
}
.left_4deg {
transform: translateY(-18px) rotate(-3deg);
}
.left_5deg {
transform: translateY(-17px) rotate(-3deg);
}
.left_6deg {
transform: translateY(-16px) rotate(-4deg);
}
.left_7deg {
transform: translateY(-15px) rotate(-5deg);
}
.left_8deg {
transform: translateY(-14px) rotate(-5.5deg);
}
.left_9deg {
transform: translateY(-13px) rotate(-6deg);
}
.left_10deg {
transform: translateY(-12px) rotate(-6.5deg);
}
.left_11deg {
transform: translateY(-11px) rotate(-7deg);
}
.left_12deg {
transform: translateY(-9px) rotate(-7.5deg);
}
.left_13deg {
transform: translateY(-8px) rotate(-8deg);
}
.left_14deg {
transform: translateY(-7px) rotate(-8.5deg);
}
.left_15deg {
transform: translateY(-6px) rotate(-9deg);
}
.left_16deg {
transform: translateY(-5px) rotate(-9.5deg);
}
\ No newline at end of file
src/index.jsx 0 → 100644
View file @ 42c3a10a
import React, {Component} from "react"
import ReactDOM from "react-dom"
import {observer} from 'mobx-react'
import "./index.less"
import {Modal} from "@spark/ui";
import pkgObj from '../package.json'
console.info('version:', pkgObj.version)
import FontSvg from "@src/fontSvg";
@observer
class App extends Component {
render() {
return (
<div>
<FontSvg activityTime={'阿圣诞贺卡收到货款静安寺好看好看'}/>
<Modal modals={{
}}/>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById("root"))
src/index.less 0 → 100644
View file @ 42c3a10a
#root {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
\ No newline at end of file
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