project init
1.首页微调 2.新增游戏-鉴色
This commit is contained in:
rucky
commit
e077d3fa4a
4
.browserslist
Normal file
4
.browserslist
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
|
not ie <= 8
|
||||||
9
.env.development
Normal file
9
.env.development
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
VUE_APP_BASE_URL = 'http://test.szxgl.cn/'
|
||||||
|
VUE_APP_SERVER_ID=0
|
||||||
|
VUE_APP_APPID = '2019121600001093'
|
||||||
|
VUE_APP_ACTIVITYID = '20171121305924'
|
||||||
|
VUE_APP_WXWORK_REQUEST_URL = 'http://test.szxgl.cn/worktile/'
|
||||||
|
VUE_APP_SHARE_URL = 'https://test.szxgl.cn/'
|
||||||
|
VUE_APP_CDN_URL = 'https://test.szxgl.cn/'
|
||||||
|
|
||||||
|
|
||||||
7
.env.production
Normal file
7
.env.production
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
VUE_APP_BASE_URL = 'http://wx.szxgl.cn/'
|
||||||
|
VUE_APP_SERVER_ID=1
|
||||||
|
VUE_APP_APPID = '2018020100000106'
|
||||||
|
VUE_APP_ACTIVITYID = '20171121305924'
|
||||||
|
VUE_APP_WXWORK_REQUEST_URL = 'http://wx.szxgl.cn/worktile/'
|
||||||
|
VUE_APP_SHARE_URL = 'http://xgl.lx666.wang/'
|
||||||
|
VUE_APP_CDN_URL = 'https://cdn.xgl.com/'
|
||||||
9
.env.test
Normal file
9
.env.test
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
VUE_APP_BASE_URL = 'http://test.szxgl.cn/'
|
||||||
|
VUE_APP_SERVER_ID=0
|
||||||
|
VUE_APP_APPID = '2019121600001093'
|
||||||
|
VUE_APP_ACTIVITYID = '20171121305924'
|
||||||
|
VUE_APP_WXWORK_REQUEST_URL = 'http://test.szxgl.cn/worktile/'
|
||||||
|
VUE_APP_SHARE_URL = 'https://test.szxgl.cn/'
|
||||||
|
VUE_APP_CDN_URL = 'https://test.szxgl.cn/'
|
||||||
|
|
||||||
|
|
||||||
90
.eslintrc.js
Normal file
90
.eslintrc.js
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
// '@vue/standard'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
|
// =========我自己的配置==============
|
||||||
|
/**
|
||||||
|
* 禁止 for 循环出现方向错误的循环，比如 for (i = 0; i < 10; i--)
|
||||||
|
* @category Possible Errors
|
||||||
|
*/
|
||||||
|
'for-direction': 'error',
|
||||||
|
/**
|
||||||
|
* 禁止将 await 写在循环里，因为这样就无法同时发送多个异步请求了
|
||||||
|
* @category Possible Errors
|
||||||
|
* @reason 要求太严格了，有时需要在循环中写 await
|
||||||
|
*/
|
||||||
|
'no-await-in-loop': 'off',
|
||||||
|
/**
|
||||||
|
* 禁止与负零进行比较
|
||||||
|
* @category Possible Errors
|
||||||
|
*/
|
||||||
|
'no-compare-neg-zero': 'error',
|
||||||
|
/**
|
||||||
|
* 禁止在判断表达式中使用赋值语句，除非这个赋值语句被括号包起来了
|
||||||
|
* @category Possible Errors
|
||||||
|
*/
|
||||||
|
'no-cond-assign': ['error', 'except-parens'],
|
||||||
|
/**
|
||||||
|
* 禁止在函数参数中出现重复名称的参数
|
||||||
|
* @category Possible Errors
|
||||||
|
*/
|
||||||
|
'no-dupe-args': 'error',
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 禁止在对象字面量中出现重复名称的键名
|
||||||
|
* @category Possible Errors
|
||||||
|
*/
|
||||||
|
'no-dupe-keys': 'error',
|
||||||
|
/**
|
||||||
|
* 变量必须先定义后使用
|
||||||
|
* @category Variables
|
||||||
|
*/
|
||||||
|
'no-use-before-define': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
functions: false,
|
||||||
|
classes: false,
|
||||||
|
variables: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
//强制驼峰法命名
|
||||||
|
"camelcase": 2,
|
||||||
|
//禁止省略浮点数中的0 .5 3.
|
||||||
|
"no-floating-decimal": 2,
|
||||||
|
//禁止使用eval
|
||||||
|
"no-eval": 1,
|
||||||
|
//函数参数不能重复
|
||||||
|
"no-dupe-args": 2,
|
||||||
|
//禁止使用alert confirm prompt
|
||||||
|
"no-alert": 0,
|
||||||
|
// 不检查结尾分号
|
||||||
|
'semi': 0,
|
||||||
|
// 函数名和括号之间空格不检查
|
||||||
|
'space-before-function-paren': 0,
|
||||||
|
// 不检查单双引号
|
||||||
|
'quotes': 0
|
||||||
|
// ================================
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint'
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: [
|
||||||
|
'**/__tests__/*.{j,t}s?(x)'
|
||||||
|
],
|
||||||
|
env: {
|
||||||
|
jest: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
package-lock.json
|
||||||
114
README.md
Normal file
114
README.md
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
## 前端脚手架介绍-信蜂互动
|
||||||
|
|
||||||
|
------
|
||||||
|
目录
|
||||||
|
```
|
||||||
|
├── README.md //说明文档
|
||||||
|
├── babel.config.js //babel 编译配置文件
|
||||||
|
├── bash //bash 文件目录
|
||||||
|
│ └── autoUploadTest.sh
|
||||||
|
├── dist //发布目录
|
||||||
|
│ ├── favicon.ico
|
||||||
|
│ ├── index.html
|
||||||
|
│ └── static // 发布静态资源目录，可在 vue.config.js 中更改
|
||||||
|
│ ├── css
|
||||||
|
│ ├── img
|
||||||
|
│ └── js
|
||||||
|
├── package.json // 项目配置文件
|
||||||
|
├── postcss.config.js // css 补全插件配置文件
|
||||||
|
├── public // 静态页面目录
|
||||||
|
│ ├── favicon.ico
|
||||||
|
│ ├── icon.jpg
|
||||||
|
│ ├── index.html
|
||||||
|
│ └── share.html
|
||||||
|
├── src // 开发主目录
|
||||||
|
│ ├── assets // 资源目录
|
||||||
|
│ │ ├── css // css目录
|
||||||
|
│ │ │ ├── global.less
|
||||||
|
│ │ │ └── reset.less
|
||||||
|
│ │ └── images // 图片目录
|
||||||
|
│ │ ├── logo.png
|
||||||
|
│ │ └── share
|
||||||
|
│ ├── components // 组件目录
|
||||||
|
│ │ └── welcome.vue
|
||||||
|
│ ├── page // 页面文件目录
|
||||||
|
│ │ ├── index
|
||||||
|
│ │ │ ├── App.vue
|
||||||
|
│ │ │ ├── Home
|
||||||
|
│ │ │ ├── main.js
|
||||||
|
│ │ │ └── router
|
||||||
|
│ │ └── share
|
||||||
|
│ │ ├── App.vue
|
||||||
|
│ │ ├── Home
|
||||||
|
│ │ ├── main.js
|
||||||
|
│ │ └── router
|
||||||
|
│ ├── preload // 预加载资源列表 目录
|
||||||
|
│ │ └── imgList.js
|
||||||
|
│ ├── store
|
||||||
|
│ │ └── index.js
|
||||||
|
│ └── utils // 工具集目录
|
||||||
|
│ ├── index.js
|
||||||
|
│ └── plugins
|
||||||
|
│ ├── create-loader.js
|
||||||
|
│ ├── plugin.js
|
||||||
|
│ ├── preloadjs-0.6.2.min.js
|
||||||
|
│ ├── qrcodejs.js
|
||||||
|
│ ├── soundjs-0.6.2.min.js
|
||||||
|
│ └── xglPlugins.min.js
|
||||||
|
├── vue.config.js // vue-cli配置文件
|
||||||
|
└── webpack.plugins.js // 自定义 webpack 工具集 废弃
|
||||||
|
```
|
||||||
|
---
|
||||||
|
### 一、启动
|
||||||
|
执行npm install 安装项目依赖，然后执行下面步骤1或步骤2。
|
||||||
|
1. 执行vue ui,面板任务中点击 dev任务启动 app。
|
||||||
|
2. 执行npm run dev启动。
|
||||||
|
|
||||||
|
### 二、自动发布
|
||||||
|
测试: vue ui面板中任务点击deploy:dev任务或执行 npm run deploy:dev 发布到测试服务器（需要在项目根目录 deploy.config.js 配置webDir参数发布目录）
|
||||||
|
生产: 执行 npm run deploy:prod 需要输入 yes 确认 方可发布
|
||||||
|
|
||||||
|
### 三、vue-cli 针对项目配置以及其他配置
|
||||||
|
项目根目录vue.config.js中：
|
||||||
|
1.pages 是多页面配置项，可根据已有配置自行扩展，新增页面需要在 public 目录中新增对应的 html文件
|
||||||
|
2. vConsolePlugin插件已在项目自动引入并且在生产环境自动放弃引入
|
||||||
|
3. 项目已启用 gzip 压缩
|
||||||
|
4. 项目已将global.less全局化，页面中只需在 style 内 引入 @import '~@/assets/css/global.less'; 即可实现自定义 less 方法使用（scss 需改造当前脚手架）
|
||||||
|
|
||||||
|
### 四、前端工具箱
|
||||||
|
工具箱目录为 ./src/utils/index.js
|
||||||
|
|
||||||
|
目前已加入的方法:
|
||||||
|
btnTouched, // 按钮点击响应动画
|
||||||
|
showTips, // 默认弹窗插件
|
||||||
|
orientation, // 横屏提示
|
||||||
|
rebuildAjax, // request 请求方法
|
||||||
|
detectEnv, // 环境检测
|
||||||
|
checkFormalEnv, // 检查当前环境是否为正式
|
||||||
|
getQueryString, // url截取参数
|
||||||
|
getSetCookie, // 设置 cookie
|
||||||
|
updateUrl, // 更新 url
|
||||||
|
addTrackEvent, // 添加埋点
|
||||||
|
getRandomElements, // 获取数组随机元素
|
||||||
|
getJGJOpenIdAndToken, // 获取金管家 openid 和 openToken 方法
|
||||||
|
rangeRandom, // 获取随机数方法
|
||||||
|
randomSortArray, // 随机排序数组方法
|
||||||
|
hexToDec, // 字符转义
|
||||||
|
decToHex, // 字符反转义
|
||||||
|
cutString, // 截取字符串
|
||||||
|
sleep, // setTimeout es6写法
|
||||||
|
loadMusic, // H5背景乐方法
|
||||||
|
jgjShare, // 金管家 share 方法
|
||||||
|
wxSdkInitialize, // 微信环境初始化 wx jssdk
|
||||||
|
wxShare, // 微信分享重置
|
||||||
|
handleTargetEnv, // 处理目标环境
|
||||||
|
loadJs, // 异步加载 js
|
||||||
|
initial, // 初始化工具集
|
||||||
|
jgjReady, // 金管家 js 异步加载完成回调
|
||||||
|
preload, // 预加载资源
|
||||||
|
|
||||||
|
工具集已挂载至 Vue 对象下的$Utils，在页面和组件中直接调用即可。
|
||||||
|
this.$Utils.btnTouched(event.target, () => {
|
||||||
|
console.log('点击了按钮')
|
||||||
|
})
|
||||||
|
具体方法的使用见 [xgl-api插件文档](http://192.168.1.250/front/utils/) preload 、rebuildAjax方法后面会更新
|
||||||
28
babel.config.js
Normal file
28
babel.config.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// var plugins = [];
|
||||||
|
// if (['production', 'prod'].includes(process.env.NODE_ENV)) {
|
||||||
|
// plugins.push("transform-remove-console")
|
||||||
|
// }
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
// '@vue/cli-plugin-babel/preset',
|
||||||
|
[
|
||||||
|
// '@vue/cli-plugin-babel/preset',
|
||||||
|
// '@vue/babel-preset-app',
|
||||||
|
"@vue/app",
|
||||||
|
{
|
||||||
|
"useBuiltIns": "entry",
|
||||||
|
corejs: 3,
|
||||||
|
"targets": {
|
||||||
|
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||||
|
},
|
||||||
|
polyfills: [
|
||||||
|
'es.promise',
|
||||||
|
'es.symbol'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
"@babel/plugin-transform-runtime"
|
||||||
|
]
|
||||||
|
}
|
||||||
3
bash/autoUploadTest.sh
Normal file
3
bash/autoUploadTest.sh
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
# 自动允许上传至测试服务器
|
||||||
|
echo yes | deploy-cli-service deploy --mode test
|
||||||
42
deploy.config.js
Normal file
42
deploy.config.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
module.exports = {
|
||||||
|
projectName: 'shadertoy', // 项目名称
|
||||||
|
// privateKey: '/Users/rucky/.ssh/id_rsa',
|
||||||
|
passphrase: '',
|
||||||
|
// dev: {
|
||||||
|
// // 环境对象
|
||||||
|
// name: '开发环境', // 环境名称
|
||||||
|
// script: 'npm run build', // 打包命令
|
||||||
|
// host: '192.168.0.1', // 服务器地址
|
||||||
|
// port: 22, // 服务器端口号
|
||||||
|
// username: 'root', // 服务器登录用户名
|
||||||
|
// password: '123456', // 服务器登录密码
|
||||||
|
// distPath: 'dist', // 本地打包生成目录
|
||||||
|
// webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
|
||||||
|
// isRemoveRemoteFile: true // 是否删除远程文件（默认true）
|
||||||
|
// },
|
||||||
|
test: {
|
||||||
|
// 环境对象
|
||||||
|
name: 'szxgl测试环境', // 环境名称
|
||||||
|
script: 'npm run build:dev', // 打包命令
|
||||||
|
host: '120.25.121.117', // 服务器地址
|
||||||
|
port: 22, // 服务器端口号
|
||||||
|
username: 'front', // 服务器登录用户名
|
||||||
|
password: 'szxglcn@3038', // 服务器登录密码
|
||||||
|
distPath: 'dist', // 本地打包生成目录
|
||||||
|
webDir: '/mnt/cdn/scl/webglToy',
|
||||||
|
// webDir: "/mnt/services/tomcat-8090-test/webapps/test/front", // test替换自己实际项目目录 服务器部署路径（不可为空或'/'）
|
||||||
|
isRemoveRemoteFile: true // 是否删除远程文件（默认true）
|
||||||
|
},
|
||||||
|
prod: {
|
||||||
|
// 环境对象
|
||||||
|
name: 'xglpa生产环境', // 环境名称
|
||||||
|
script: 'npm run build:pro', // 打包命令
|
||||||
|
host: '120.25.121.117', // 服务器地址
|
||||||
|
port: 22, // 服务器端口号
|
||||||
|
username: 'front', // 服务器登录用户名
|
||||||
|
password: 'szxglcn@3038', // 服务器登录密码
|
||||||
|
distPath: 'dist', // 本地打包生成目录
|
||||||
|
webDir: "/mnt/services/tomcat-9090/webapps/worktile/front", // xxx替换自己实际项目目录 服务器部署路径（不可为空或'/'）
|
||||||
|
isRemoveRemoteFile: true // 是否删除远程文件（默认true）
|
||||||
|
}
|
||||||
|
}
|
||||||
98
package.json
Normal file
98
package.json
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
{
|
||||||
|
"name": "weglToy",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"build:dev": "vue-cli-service build --mode development",
|
||||||
|
"build:pro": "vue-cli-service build --mode production",
|
||||||
|
"deploy:dev": "bash ./bash/autoUploadTest.sh",
|
||||||
|
"deploy:prod": "deploy-cli-service deploy --mode prod",
|
||||||
|
"dev": "vue-cli-service serve --mode development"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/polyfill": "^7.12.1",
|
||||||
|
"@nutui/nutui": "^2.2.15",
|
||||||
|
"compression-webpack-plugin": "^5.0.1",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"cross-env": "^7.0.2",
|
||||||
|
"cssnano": "^4.1.10",
|
||||||
|
"eslint-config-standard": "^14.1.1",
|
||||||
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
|
"eslint-plugin-standard": "^4.0.1",
|
||||||
|
"global": "^4.4.0",
|
||||||
|
"good-storage": "^1.1.1",
|
||||||
|
"gsap": "^3.5.1",
|
||||||
|
"less": "^3.12.2",
|
||||||
|
"less-loader": "^7.0.0",
|
||||||
|
"lib-flexible": "^0.3.2",
|
||||||
|
"postcss-less": "^3.1.4",
|
||||||
|
"postcss-px2rem-exclude": "^0.0.6",
|
||||||
|
"postcss-viewport-units": "^0.1.6",
|
||||||
|
"px2rem-loader": "^0.1.9",
|
||||||
|
"style-resources-loader": "^1.3.3",
|
||||||
|
"swiper": "^6.2.0",
|
||||||
|
"tinyimg-webpack-plugin": "^0.0.5",
|
||||||
|
"vconsole-webpack-plugin": "^1.5.2",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-lazyload": "^1.3.3",
|
||||||
|
"vue-router": "^3.2.0",
|
||||||
|
"vue-simple-uploader": "^0.7.6",
|
||||||
|
"vue-slider-component": "^3.2.11",
|
||||||
|
"vuex": "^3.4.0",
|
||||||
|
"webpack-glsl-loader": "^1.0.1",
|
||||||
|
"wx-jssdk": "^0.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.13.14",
|
||||||
|
"@babel/plugin-transform-runtime": "^7.13.10",
|
||||||
|
"@babel/preset-env": "^7.13.12",
|
||||||
|
"@nutui/nutui": "^2.2.15",
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"axios": "^0.20.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"babel-polyfill": "^6.26.0",
|
||||||
|
"deploy-cli-service": "^1.2.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"glslify": "^7.1.1",
|
||||||
|
"qrcode": "^1.4.4",
|
||||||
|
"stats.js": "^0.17.0",
|
||||||
|
"style-resources-loader": "^1.3.2",
|
||||||
|
"three": "^0.126.0",
|
||||||
|
"vue-awesome-swiper": "^4.1.1",
|
||||||
|
"vue-cli-plugin-postcss-preset": "^1.0.2",
|
||||||
|
"vue-cli-plugin-style-resources-loader": "~0.1.4",
|
||||||
|
"vue-datepicker-ui": "^1.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.11",
|
||||||
|
"weui": "^2.4.3",
|
||||||
|
"weui.js": "^1.2.2"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"pre-commit": [
|
||||||
|
"lint"
|
||||||
|
],
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/recommended",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead",
|
||||||
|
"not ie <= 8"
|
||||||
|
]
|
||||||
|
}
|
||||||
29
postcss.config.js
Normal file
29
postcss.config.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
autoprefixer: {},
|
||||||
|
'postcss-viewport-units': {
|
||||||
|
// 排除会产生警告的部份
|
||||||
|
filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
|
||||||
|
},
|
||||||
|
cssnano: {
|
||||||
|
preset: 'default',
|
||||||
|
autoprefixer: false, // 和autoprefixer同样具有autoprefixer，保留一个
|
||||||
|
'postcss-zindex': false
|
||||||
|
},
|
||||||
|
"postcss-px2rem-exclude": {
|
||||||
|
remUnit: 37.5,//转换为rem的基准px
|
||||||
|
remPrecision: 8, //转换精度，小数点后保留位数
|
||||||
|
// exclude: /node_modules|folder_name/i
|
||||||
|
},
|
||||||
|
// postcss-px-to-viewport，将px单位自动转换成viewport单位 和 px2rem 任选其一
|
||||||
|
// 'postcss-px-to-viewport': {
|
||||||
|
// viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
|
||||||
|
// // viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
|
||||||
|
// unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
|
||||||
|
// viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
|
||||||
|
// selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
|
||||||
|
// minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
|
||||||
|
// mediaQuery: false // 允许在媒体查询中转换`px`
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
84
public/index.html
Normal file
84
public/index.html
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ch">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="Expires" content="0" />
|
||||||
|
<meta http-equiv="Pragma" content="no-cache">
|
||||||
|
<meta http-equiv="Cache-control" content="no-cache, must-revalidate">
|
||||||
|
<meta http-equiv="Cache" content="no-cache">
|
||||||
|
<meta name="apple-touch-fullscreen" content="YES" />
|
||||||
|
<meta name="format-detection" content="telephone=no" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,viewport-fit=cover" />
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<meta name="flexible" content="initial-dpr=1" />
|
||||||
|
<title>
|
||||||
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<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>
|
||||||
|
<!-- loading -->
|
||||||
|
<!-- loading -->
|
||||||
|
<div class="loading-container" id="loadingContainer">
|
||||||
|
<div class="loader" style="visibility: hidden;">
|
||||||
|
<div class="con">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="svg" viewBox="0 0 400 400">
|
||||||
|
<symbol id="single">
|
||||||
|
<path d="M0,79.48C0,111.42,12.64,140,32.5,159c43-39.62,43-119.37,0-159C12.64,19,0,47.55,0,79.48Z" />
|
||||||
|
</symbol>
|
||||||
|
<!-- 引用花瓣 -->
|
||||||
|
<!-- use[x="250" y="250" xlink:href="#single" class="leaf l-$"]#leaf$*36 emmet 生成语句-->
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-1" id="leaf1"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-2" id="leaf2"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-3" id="leaf3"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-4" id="leaf4"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-5" id="leaf5"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-6" id="leaf6"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-7" id="leaf7"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-8" id="leaf8"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-9" id="leaf9"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-10" id="leaf10"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-11" id="leaf11"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-12" id="leaf12"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-13" id="leaf13"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-14" id="leaf14"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-15" id="leaf15"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-16" id="leaf16"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-17" id="leaf17"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-18" id="leaf18"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-19" id="leaf19"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-20" id="leaf20"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-21" id="leaf21"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-22" id="leaf22"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-23" id="leaf23"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-24" id="leaf24"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-25" id="leaf25"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-26" id="leaf26"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-27" id="leaf27"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-28" id="leaf28"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-29" id="leaf29"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-30" id="leaf30"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-31" id="leaf31"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-32" id="leaf32"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-33" id="leaf33"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-34" id="leaf34"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-35" id="leaf35"></use>
|
||||||
|
<use x="170" y="25" xlink:href="#single" class="leaf l-36" id="leaf36"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>精彩即将为您呈现...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
public/other/error.png
Normal file
BIN
public/other/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 550 B |
BIN
public/other/loading.gif
Normal file
BIN
public/other/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
15
src/api/base.js
Normal file
15
src/api/base.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const base = {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
base.$apiServer = {
|
||||||
|
baseApi: 'https://hd.xglpa.com',
|
||||||
|
// githubApi: process.env.VUE_APP_BASE_BASE2_API
|
||||||
|
}
|
||||||
|
base.$api = {
|
||||||
|
query: `${base.$apiServer.baseApi}/zx-xnfh/api/query`,
|
||||||
|
vote: `${base.$apiServer.baseApi}/zx-xnfh/api/vote`
|
||||||
|
}
|
||||||
|
export {
|
||||||
|
base
|
||||||
|
}
|
||||||
227
src/api/index.js
Normal file
227
src/api/index.js
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
import Bus from "../bus.js";
|
||||||
|
import {
|
||||||
|
post,
|
||||||
|
get
|
||||||
|
} from '@/axios/http.js'
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
//xf_api
|
||||||
|
// 1-初始化 api/query
|
||||||
|
function xf_query(params) {
|
||||||
|
Bus.debug && (params.openid = Bus.testOpenId)
|
||||||
|
return readyPost(Bus.domin + "/api/query", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2-用户完成新手指引 api/finishGuide
|
||||||
|
function xf_finishGuide(params) {
|
||||||
|
params.userId = Bus.userInfo['id']
|
||||||
|
Bus.debug && (params.userId = Bus.testUserId)
|
||||||
|
return readyPost(Bus.domin + "/api/finishGuide", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3-抽奖 api/lottery
|
||||||
|
function xf_lottery(params) {
|
||||||
|
params.userId = Bus.userInfo['id']
|
||||||
|
Bus.debug && (params.userId = Bus.testUserId)
|
||||||
|
return readyPost(Bus.domin + "/api/lottery", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4-我的奖品 api/prize
|
||||||
|
function xf_prize(params) {
|
||||||
|
params.userId = Bus.userInfo['id']
|
||||||
|
Bus.debug && (params.userId = Bus.testUserId)
|
||||||
|
return readyPost(Bus.domin + "/api/prize", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 5-保存实物奖物流信息 api/saveLogistics
|
||||||
|
function xf_saveLogistics(params) {
|
||||||
|
params.userId = Bus.userInfo['id']
|
||||||
|
Bus.debug && (params.userId = Bus.testUserId)
|
||||||
|
return readyPost(Bus.domin + "/api/saveLogistics", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 6-修改实物奖物流信息 api/updateLogistics
|
||||||
|
function xf_updateLogistics(params) {
|
||||||
|
params.userId = Bus.userInfo['id']
|
||||||
|
Bus.debug && (params.userId = Bus.testUserId)
|
||||||
|
return readyPost(Bus.domin + "/api/updateLogistics", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 初始化 test_api/query
|
||||||
|
function test_query(params) {
|
||||||
|
return readyPost(Bus.domin + "/api/query", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
//jgj_api
|
||||||
|
function jgj_lotteryInfo(params) {
|
||||||
|
return getJgjOpenIdToken().then((res) => {
|
||||||
|
Object.assign(params, res);
|
||||||
|
return readyPost(Bus.jgj_domain + "/act-reward/external/lottery/info", params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function jgj_lotteryDraw(params) {
|
||||||
|
return getJgjOpenIdToken().then((res) => {
|
||||||
|
Object.assign(params, res);
|
||||||
|
return readyPost(Bus.jgj_domain + "/act-reward/external/lottery/draw", params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//请求业务员地域编号
|
||||||
|
function jgj_queryAgentInfo(params) {
|
||||||
|
return getJgjOpenIdToken().then((res) => {
|
||||||
|
Object.assign(params, res);
|
||||||
|
return readyPost(Bus.jgj_domain + "/act-core/external/third/party/queryAgentInfo", params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function jgj_getPaShareToken(params) {
|
||||||
|
return getJgjOpenIdToken().then((res) => {
|
||||||
|
Object.assign(params, res);
|
||||||
|
return readyPost(Bus.jgj_getPaShareToken_url, params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//获取用户昵称
|
||||||
|
function jgj_userInfo(params) {
|
||||||
|
return getJgjOpenIdToken().then((res) => {
|
||||||
|
Object.assign(params, res);
|
||||||
|
return readyPost(Bus.jgj_domain + "/act-core/external/third/party/user/info", params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取用户openid opentoken
|
||||||
|
function jgj_getJgjOpenIdToken(params) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
PALifeOpen.getOpenId({
|
||||||
|
appId: Bus.jgj_appId
|
||||||
|
}, (res) => {
|
||||||
|
if (res.ret == 0) {
|
||||||
|
res.CODE = "00"
|
||||||
|
resolve(res)
|
||||||
|
} else {
|
||||||
|
reject(res)
|
||||||
|
}
|
||||||
|
}, (e) => { //
|
||||||
|
console.debug('failed ', e);
|
||||||
|
reject(e)
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//单独请求接口 single_request
|
||||||
|
// function single_request(params) {
|
||||||
|
// return new Promise((resolve, reject) => {
|
||||||
|
// PALifeOpen.getOpenId({
|
||||||
|
// appId: Bus.jgj_appId
|
||||||
|
// }, (res) => {
|
||||||
|
// if (res.ret == 0) {
|
||||||
|
// res.CODE = "00"
|
||||||
|
// resolve(res)
|
||||||
|
// } else {
|
||||||
|
// reject(res)
|
||||||
|
// }
|
||||||
|
// }, (e) => { //
|
||||||
|
// console.debug('failed ', e);
|
||||||
|
// reject(e)
|
||||||
|
// });
|
||||||
|
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
function single_request(params) {
|
||||||
|
// return getJgjOpenIdToken().then((res) => {
|
||||||
|
// Object.assign(params, res);
|
||||||
|
return readyPost(params.url, params.requestData)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
// param.timestamp = new Date().getTime();
|
||||||
|
///////////////////////////
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
|
||||||
|
function getJgjOpenIdToken(cb) {
|
||||||
|
var p = new Promise((resolve, reject) => {
|
||||||
|
PALifeOpen.getOpenId({
|
||||||
|
appId: Bus.jgj_appId
|
||||||
|
}, (res) => {
|
||||||
|
console.log(res);
|
||||||
|
if (res.ret == 0) {
|
||||||
|
Bus.jgj_data.openId = res.data.openId;
|
||||||
|
Bus.jgj_data.openToken = res.data.openToken;
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
openid: res.data.openId,
|
||||||
|
openId: res.data.openId,
|
||||||
|
openToken: res.data.openToken,
|
||||||
|
merchantCode: Bus.jgj_appId,
|
||||||
|
activityId: Bus.jgj_activityId,
|
||||||
|
appId: Bus.jgj_appId,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, (e) => { //
|
||||||
|
console.debug('failed ', e);
|
||||||
|
reject(e)
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
|
||||||
|
|
||||||
|
//核心readyPost方法
|
||||||
|
function readyPost(url, params) {
|
||||||
|
// Object.assign(params, { retry: 5, retryDelay: 1000 })
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
post(url, params)
|
||||||
|
.then(res => {
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
xf_query,
|
||||||
|
xf_finishGuide,
|
||||||
|
xf_lottery,
|
||||||
|
xf_prize,
|
||||||
|
xf_saveLogistics,
|
||||||
|
xf_updateLogistics,
|
||||||
|
test_query,
|
||||||
|
|
||||||
|
|
||||||
|
jgj_lotteryInfo,
|
||||||
|
jgj_lotteryDraw,
|
||||||
|
jgj_queryAgentInfo,
|
||||||
|
jgj_getPaShareToken,
|
||||||
|
jgj_userInfo,
|
||||||
|
jgj_getJgjOpenIdToken,
|
||||||
|
|
||||||
|
single_request,
|
||||||
|
}
|
||||||
42
src/api/project.js
Normal file
42
src/api/project.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import {
|
||||||
|
post,
|
||||||
|
get
|
||||||
|
} from '@/axios/http.js'
|
||||||
|
|
||||||
|
|
||||||
|
// 新建项目-获取客户单位列表
|
||||||
|
// /mobile/api/project/getCustomerList
|
||||||
|
export function projectGetCustomerList(params) {
|
||||||
|
return post(process.env.VUE_APP_BASE_URL + "worktile/mobile/api/project/getCustomerList", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 项目编辑 - 查询负责人抄送人
|
||||||
|
// /mobile/api/project/selectLeaderUsers
|
||||||
|
export function projectSelectLeaderUsers(params) {
|
||||||
|
return post(process.env.VUE_APP_BASE_URL + "worktile/mobile/api/project/selectLeaderUsers", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新建项目-查询负责人所属区域
|
||||||
|
// /mobile/api/project/queryArea
|
||||||
|
export function projectQueryArea(params) {
|
||||||
|
return post(process.env.VUE_APP_BASE_URL + "worktile/mobile/api/project/queryArea", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新建项目 - 保存信息
|
||||||
|
// /mobile/api/project/add
|
||||||
|
export function projectAdd(params) {
|
||||||
|
return post(process.env.VUE_APP_BASE_URL + "worktile/mobile/api/project/add", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新建项目 - 修改信息
|
||||||
|
// /mobile/api/project/update
|
||||||
|
export function projectUpdate(params) {
|
||||||
|
return post(process.env.VUE_APP_BASE_URL + "worktile/mobile/api/project/update", params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 项目编辑-通过id查询项目详情
|
||||||
|
// /mobile/api/project/findById
|
||||||
|
export function projectFindById(params) {
|
||||||
|
return post(process.env.VUE_APP_BASE_URL + "worktile/mobile/api/project/findById", params)
|
||||||
|
}
|
||||||
5
src/assets/css/calendar.css
Normal file
5
src/assets/css/calendar.css
Normal file
File diff suppressed because one or more lines are too long
174
src/assets/css/global.less
Normal file
174
src/assets/css/global.less
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
|
||||||
|
@charset "utf-8";
|
||||||
|
@import "~@/assets/font/project_iconfont.css";
|
||||||
|
/*--------------------
|
||||||
|
通用
|
||||||
|
--------------------*/
|
||||||
|
// function
|
||||||
|
@scale: .7px;
|
||||||
|
@baseUrl: "@/assets/images/";
|
||||||
|
@center : center center no-repeat;
|
||||||
|
.bg-norepeat(@src,@format){
|
||||||
|
background: url("~@/assets/images/@{src}.@{format}") @center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.bg-size(@src,@format,@sizeW,@sizeH){
|
||||||
|
background: url("~@/assets/images/@{src}.@{format}") @center;
|
||||||
|
background-size:@sizeW @sizeH;
|
||||||
|
}
|
||||||
|
.bg-top(@src,@format){
|
||||||
|
background: url("~@/assets/images/@{src}.@{format}") @center;
|
||||||
|
}
|
||||||
|
.bg-left(@src,@format){
|
||||||
|
background: url("~@/assets/images/@{src}.@{format}") 18px center no-repeat;
|
||||||
|
}
|
||||||
|
.bg-left2(@src,@format){
|
||||||
|
background: url("~@/assets/images/@{src}.@{format}") left top no-repeat;
|
||||||
|
}
|
||||||
|
.bg-float(@src,@format){
|
||||||
|
background: url("~@/assets/images/float/@{src}.@{format}") @center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.bg-float2(@src,@format){
|
||||||
|
background: url("~@/assets/images/stars/@{src}.@{format}") @center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.bg-repeat(@src,@format){
|
||||||
|
background: url("~@/assets/images/@{src}.@{format}") repeat;
|
||||||
|
}
|
||||||
|
.bg-anyPos(@src,@format,@position){
|
||||||
|
background: url("~@/assets/images/@{src}.@{format}") @position no-repeat;
|
||||||
|
}
|
||||||
|
.boxcenter{
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-pack:center;
|
||||||
|
-webkit-box-align:center;
|
||||||
|
}
|
||||||
|
.paLayout(@left,@top,@width,@height,@index){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
position: absolute;
|
||||||
|
left:@left;
|
||||||
|
top:@top;
|
||||||
|
z-index: @index;
|
||||||
|
}
|
||||||
|
.paRightLayout(@right,@top,@width,@height,@index){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
position: absolute;
|
||||||
|
right:@right;
|
||||||
|
top:@top;
|
||||||
|
z-index: @index;
|
||||||
|
}
|
||||||
|
.paBottomLayout(@left,@bottom,@width,@height,@index){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
position: absolute;
|
||||||
|
left:@left;
|
||||||
|
bottom:@bottom;
|
||||||
|
z-index: @index;
|
||||||
|
}
|
||||||
|
.paCenter(@top,@width,@height,@index){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
position: absolute;
|
||||||
|
left:50%;
|
||||||
|
margin-left:-@width/2;
|
||||||
|
top:@top;
|
||||||
|
z-index: @index;
|
||||||
|
}
|
||||||
|
.paPos(@left,@top,@index){
|
||||||
|
position: absolute;
|
||||||
|
left:@left;
|
||||||
|
top:@top;
|
||||||
|
z-index: @index;
|
||||||
|
}
|
||||||
|
.paCenterBottom(@bottom,@width,@height,@index){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
position: absolute;
|
||||||
|
left:50%;
|
||||||
|
margin-left:-@width/2;
|
||||||
|
bottom:@bottom;
|
||||||
|
z-index: @index;
|
||||||
|
}
|
||||||
|
.paWH(@width,@height,@index){
|
||||||
|
position: absolute;
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
z-index: @index;
|
||||||
|
}
|
||||||
|
.prLayout(@width,@height){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pfLayout(@left,@top,@width,@height,@index){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
left:@left;
|
||||||
|
top:@top;
|
||||||
|
z-index: @index;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.pfRightLayout(@right,@top,@width,@height,@index){
|
||||||
|
width:@width;
|
||||||
|
height:@height;
|
||||||
|
right:@right;
|
||||||
|
top:@top;
|
||||||
|
z-index: @index;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('~@/assets/font/iconfont.eot?t=1615881124787'); /* IE9 */
|
||||||
|
src: url('~@/assets/font/iconfont.eot?t=1615881124787#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAgkAAsAAAAADtAAAAfVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqPNIxuATYCJAMoCxYABCAFhG0HgQAbrAwjESaUFEX2zwTzPKMeNnkjs0RiGNVfnFK3hg3eDKWE+OdqM3sf4LuVYM9DCDzLNJL4J5gPT2f2/swPZ+IJVi6ARZKKi0qrWpPWkzsHpRBUzBY6MQGwuGYjMiJ7i2SB5ADVQXrNQXOloXD7+/ZrVT1EO992vcx+O9kzW8w98kgWGiHNxz0ekQaJDqEQUkenjsK3CyolSvRxWVuEFz3Aqp3ZP3kaAjRIRDUQu7N9dyhBAXZpn2FlJQOgjPhBM3KF0iVHrqQg30EGJbOQuQbwcn7f96hDlEACGQt41qPYMRjZEUOFhxWjInqzIsTmOHC9DqQAN4AMcBla/Abr2W4OU2ODKcoBFuj53zIRQ0SIWCK5kV4RdyRc4YlGk0nSVLBZGEWsYEdDwyCDHBSKyf7jqQDl4Kyjic+WGgiDIkiBEAgSICwEORC5BAUQvQgyICSCEgg3QQVEmEDg5/FT0/jm+A3gAJIRQNqbJN5ZdUy5DOzVzjqN8RoVqS4u1ttslJqFKioVz8cn62UUjPQ8nxzLn1NA69ij4aRQaBYITMRgY2swxM2czr2VkJQo9DwfHK4K2C+EztaGW/XhSTg8DwanKPYTq4sQi89C+IgNO4jrbJZ/6ZINwrkAiLsrX6ouXN8SDn/7rWTQ1r1kTcjpW7dosXn9aYjb0j0CcRUBIsyi2Ws+35hUVC0U+iOFks8i8y9tv/NiM/V41FP7wENS917xgJjfMg+6CwfgD7sSPqkgg7koc9NO4kCOURcqZFBMVX84L0xcoUw5BXpUxPzTwVXv7y5239V92y3bljs1QnXOjL5SEB9ss94L7yG7feQp5LxwxOryZ10tTAy0DsQvb7w5GPwPh8+PkhXF7ruuO9It8Xbh+s3iJmmLa+vUwKtJ8PU0XDEPRXb9kOq+VyCwVpMlW6RNNqjXbRI3Z3BYPLX7xBFu41bXlqlq4vJJHgE88TlRBHr7bsXT5bfr6w7eTZKtuNNb3KTWSluIzLU1S7d+M4aBI2qOg9pyoS6IHRSbf6+x+d7Fm9ZZCnyEdW11bzb3DkVmg6BDKQ68mj3YrG/8uORIbfc4tG11ZfMALxhxe0b+eo4cvFtGxTrIunVtd/T3LMO44JFqirGo7bAM9C216ryLe/um57Fyd/3iTULBI2aRMG3OcW66UV0yZttqO6hLwzwU2vdf3lN0njqS8Mt58Pl0sWEGsEeV0ZYnHUtLOnYOKSmxVv+qqgrSyv0Y2EJj0FRTkRYYeAYWpI3W5NgdJgF62bUcDsGE1f693ackUup2l5ICdSSlSefrMGx+GcpmmNJgz1l6LT6l/x97zxW1P9O+ZRd5oj39pnMsnLU0hliDphay2w34/PMM/G1OtyfS5l2qn2lXuv/Mvc7J8deW5tiRZsqoBTCGmfHz53YDkF3hXk7n2JvAJ4WP8jO5L7zIf+FmBjga36mR0nnq1M4pXVMPEAYW3pHUrgdiWgTr8VOCo7zckdAqYQVgYKm5Z6sVCa2Qzi9vZCN7ZpTeCZ+m/WxIc3R6PHldUb2MXq1b984sIQzsWfWKJqy7ltf5iMQUjZ9QRMozYUJHIzMl+3xte6jTz6TmxVp5B3SptYf00AzvztHJ/zNs2YoOCzSLiHVYUcYy/5fR7tzwH3RITrwS838u477WrgAM9rM/RelPyiBtSNurmyFtpr44TSBIZsUHNCmJPjAQNS3BAM3ePYfpH39QWA8HpRY+ODl04ADSUtNg71IntQ4+71b/jk9cwEdtn7kFrd3cZ1t04J4l5isEZb54RMxXCop8jDYUG44oTDAMwREMMQxa1jC92iWmbRTznmlAu8x50qhhI4TviayRnnGHqlr3bFwz84EhRVs3oa4mNdrHSDK9XyDbgwvAI7sfSEpyuPI5KpfTcwagpp8qgrNkcjTrptkoxb6JlVqKxvwWD+fxk20T207IbWxGLX36YW6C5UmqcbTTRoyP/vlZOKQ5mKvJnZC9XjvFxLw3Ppx66FnFrUPrvtmFWOw6t+tLh+w6u/Bl/UmRhTzBgfw5/ovqJx5RTymze6G87vlmKeOWgvN+sJOevUgesfcstMMOkmMneahl0GahWGC/DZ9ayzoIHkwozioW6F7FTxdZBx9G9wrFmHoKUJ1uY6KOWh/mEfA/yZ5is0neb+kilss7k55gW+SJVMaKTTvYW2xONJUNSRrPUejpw7/76Zr9puRORtu+E1Yc4kq1aiow/0oEtBkvpc+YqOWjgK35rgy1gAayblb1LZQAlkS2qQG0l/IFT5p27oUl/cxpDjQJFEjQpFAiPTZLrKbJwaGepoASLTUNqqLV9S1MGAMWhKoALphLNAR67NQw0OKkjcUSr9soTXyskcGCj1Y5MgmrUaOAmO7IIZPspN67wcBhDOEeKGIlGHI9t+8IE58HhinGSTM0lljB7dXNr+0bFZomzrGb5M45AcJwAV/kDMxzhtJwipG7kmgt366vxf3cq4iLSg/vBgNnGcYQ7s0pYiW2dr3Ez48w8XlgMqZ8m8/QWNo/3F7dFIj9ZqrQlEMZbDfJnWNcgBptuIAvxjEXzQwlfliKkbuSFRrLt2u2lCjKrrp3FntbOX1NA5+oRxJTM3MLSytrG1uao706+MEWKaSAHT3ePjesw7IRk/atlAIZcMOQpkFKSgYqOUjuczpWBrTzgWobVHvHV6kAAAA=') format('woff2'),
|
||||||
|
url('~@/assets/font/iconfont.woff?t=1615881124787') format('woff'),
|
||||||
|
url('~@/assets/font/iconfont.ttf?t=1615881124787') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||||
|
url('~@/assets/font/iconfont.svg?t=1615881124787#iconfont') format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-pannel{
|
||||||
|
.weui-actionsheet__title{
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.weui-actionsheet__menu{
|
||||||
|
.weui-actionsheet__cell:nth-child(3){
|
||||||
|
color: #e15344;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toast-warn {
|
||||||
|
.weui-toast {
|
||||||
|
.weui-icon_toast.weui-icon-success-no-circle {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.weui-icon_toast.weui-icon-success-no-circle:before {
|
||||||
|
color: #fff;
|
||||||
|
content: "\e60e" !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.weui-toast__content{
|
||||||
|
padding: 0 10px!important;
|
||||||
|
}
|
||||||
|
// 重置所有 placeholder 色值
|
||||||
|
input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
177
src/assets/css/reset.less
Normal file
177
src/assets/css/reset.less
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*--------------------
|
||||||
|
默认设置
|
||||||
|
-------------------*/
|
||||||
|
*{
|
||||||
|
padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;/* -webkit-user-select: none;-moz-user-select: none; */ /*touch-action: none; */
|
||||||
|
// -webkit-transform: translate3d(0, 0, 0);
|
||||||
|
// -moz-transform: translate3d(0, 0, 0);
|
||||||
|
// -ms-transform: translate3d(0, 0, 0);
|
||||||
|
// transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
html { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight:rgba(0,0,0,0);-webkit-text-size-adjust:none;overflow:-moz-scrollbars-vertical;width: 100%; height: 100%; font-size: 100px;}
|
||||||
|
body { position: relative; width: 100%; height:100%; margin: 0 auto; font: normal 12px/auto "Helvetica Neue", Helvetica,'Micorsoft YaHei', Arial, sans-serif; /* -webkit-user-select: none;*/ }
|
||||||
|
a{text-decoration:none; color: #fff;}
|
||||||
|
textarea{resize:none;}
|
||||||
|
article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block;}
|
||||||
|
h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1em;font-weight:normal;}
|
||||||
|
body, input, button, select, textarea, sub{ font-family:Arial, sans-serif;}
|
||||||
|
em, cite, address, optgroup { font-style:normal;}
|
||||||
|
kbd, samp, code { font-family:monospace;}
|
||||||
|
input, button, select, textarea { vertical-align:middle;outline:none;outline: none;background: none; border:none; margin: 0; padding: 0; }
|
||||||
|
ul, ol { list-style:none;}
|
||||||
|
img, fieldset { border:0; max-width: 100%;}
|
||||||
|
|
||||||
|
html{
|
||||||
|
background-color: #0c0718;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
body{
|
||||||
|
// max-width: 750px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background: #0c0718;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active-dot{
|
||||||
|
background: #3c3c3c;
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,body{
|
||||||
|
// height: auto!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// loading style
|
||||||
|
@vw: 7.5vw;
|
||||||
|
.loading-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #0c0718;
|
||||||
|
// background: -webkit-linear-gradient(top, #b7dbfa 0%, #82c3f8 15%, #63acf3 85%, #b7dbfa 100%) ;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.leaf{
|
||||||
|
fill: #9A4DFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hide {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.keyframes (@prefix,@name,@content) when (@prefix=def) {
|
||||||
|
@keyframes @name {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
|
||||||
|
@-moz-keyframes @name {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.keyframes (@prefix,@name,@content) when (@prefix=o) {
|
||||||
|
@-o-keyframes @name {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
|
||||||
|
@-webkit-keyframes @name{
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.keyframes (@prefix,@name,@content) when (@prefix=all) {
|
||||||
|
.keyframes(moz,@name,@content);
|
||||||
|
.keyframes(o,@name,@content);
|
||||||
|
.keyframes(webkit,@name,@content);
|
||||||
|
.keyframes(def,@name,@content);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@i:0;
|
||||||
|
.loop(@i)when(@i<36){//递归调用 达到循环的目的
|
||||||
|
.loop((@i+1));//执行某个需要循环的方法
|
||||||
|
@realIndex: @i+1;
|
||||||
|
@aniname : ~'leaf@{realIndex}';
|
||||||
|
@delaytime: @i*0.05+0.1;
|
||||||
|
@duration: @i*0.1*0.5;
|
||||||
|
@durationStr: ~'@{duration}s';
|
||||||
|
@delaytimeStr: ~'@{delaytime}s';
|
||||||
|
@rotate: @i*10-10;
|
||||||
|
@rotateStr: ~'@{rotate}deg';
|
||||||
|
@rotateNext: @i*10;
|
||||||
|
@rotateNextStr: ~'@{rotateNext}deg';
|
||||||
|
|
||||||
|
.keyframes(all,@aniname,{
|
||||||
|
from{
|
||||||
|
opacity: 0;
|
||||||
|
transform:rotate(@rotateStr) scale(1);
|
||||||
|
transform-origin:50% 45.4%;
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
opacity: 0.45;
|
||||||
|
transform:rotate(@rotateNextStr) scale(1);
|
||||||
|
transform-origin:50% 45.4%;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
#leaf@{realIndex} {
|
||||||
|
animation: @aniname @durationStr ease @delaytimeStr both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//初始化开始循环 不初始化 不会开始循环
|
||||||
|
.loop(@i);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotateCon {
|
||||||
|
from {
|
||||||
|
transform: rotate(-30deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.loading-container .loader,
|
||||||
|
.loading-container .loader:after {
|
||||||
|
visibility: visible!important;
|
||||||
|
// border-radius: 50%;
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
// background-color: #ff6d47;
|
||||||
|
}
|
||||||
|
.loading-container .loader{
|
||||||
|
.con{
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
transform-origin:50% 45%;
|
||||||
|
animation: rotateCon 5s linear infinite;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
animation: hide .5s ease 3s both;
|
||||||
|
}
|
||||||
|
#svg{
|
||||||
|
animation: hide .5s ease 3s both;
|
||||||
|
// background-color: #edd;
|
||||||
|
}
|
||||||
|
}
|
||||||
3159
src/assets/css/weui-2.0.1.css
Normal file
3159
src/assets/css/weui-2.0.1.css
Normal file
File diff suppressed because one or more lines are too long
2955
src/assets/css/weui-for-work.css
Normal file
2955
src/assets/css/weui-for-work.css
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/font/iconfont.eot
Normal file
BIN
src/assets/font/iconfont.eot
Normal file
Binary file not shown.
53
src/assets/font/iconfont.svg
Normal file
53
src/assets/font/iconfont.svg
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<!--
|
||||||
|
2013-9-30: Created.
|
||||||
|
-->
|
||||||
|
<svg>
|
||||||
|
<metadata>
|
||||||
|
Created by iconfont
|
||||||
|
</metadata>
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
<font id="iconfont" horiz-adv-x="1024" >
|
||||||
|
<font-face
|
||||||
|
font-family="iconfont"
|
||||||
|
font-weight="500"
|
||||||
|
font-stretch="normal"
|
||||||
|
units-per-em="1024"
|
||||||
|
ascent="896"
|
||||||
|
descent="-128"
|
||||||
|
/>
|
||||||
|
<missing-glyph />
|
||||||
|
|
||||||
|
<glyph glyph-name="qunzu" unicode="" d="M621.341 434.994c43.302 34 71.237 86.668 71.237 145.856 0 102.308-83.223 185.535-185.538 185.535-102.311 0-185.535-83.223-185.535-185.535 0-59.189 27.965-111.856 71.237-145.856-114.028-45.57-194.928-156.974-194.928-287.061v-61.845c0-17.093 13.83-30.926 30.926-30.926h556.608c17.093 0 30.919 13.83 30.919 30.926v61.844c0.003 130.123-80.869 241.492-194.926 287.062v0zM507.044 704.541c68.215 0 123.689-55.473 123.689-123.689 0-68.219-55.473-123.695-123.689-123.695-68.219 0-123.694 55.474-123.694 123.695-0.001 68.215 55.473 123.689 123.694 123.689v0zM754.422 117.006h-494.765v30.925c0 136.403 110.977 247.38 247.413 247.38 136.403 0 247.35-110.977 247.35-247.38v-30.925zM754.422 117.006zM300.033 424.243c0.848 1.87 0.848 3.863 1.267 5.797 0.3 1.178 0.636 2.294 0.788 3.534 0.238 2.444 0.092 4.769-0.243 7.154-0.119 1.267 0.181 2.478-0.119 3.745-0.181 0.727-0.693 1.239-0.908 1.966-0.479 1.386-1.143 2.625-1.808 3.922-1.274 2.659-2.659 5.073-4.562 7.217-0.273 0.3-0.603 0.515-0.905 0.817-2.806 2.929-6.041 5.162-9.724 6.764-33.461 14.916-55.084 48.138-55.084 84.736 0 43.063 29.169 80.147 70.961 90.201 16.609 4.018 26.816 20.719 22.833 37.329-4.046 16.606-20.81 26.693-37.329 22.83-69.666-16.791-118.314-78.639-118.314-150.357 0-39.138 14.889-75.826 40.193-103.728-80.475-41.706-132.96-125.109-132.96-219.481v-47.834c0-17.093 13.83-30.926 30.919-30.926 17.093 0 30.926 13.83 30.926 30.926v47.834c0 85.523 57.497 158.905 139.999 179.68 10.263 1.449 19.598 7.698 24.064 17.875v0zM300.033 424.243zM806.879 446.165c25.305 27.903 40.19 64.593 40.19 103.731 0 69.847-47.047 131.271-114.416 149.36-16.458 4.41-33.43-5.346-37.902-21.831-4.438-16.519 5.346-33.46 21.838-37.902 40.403-10.838 68.637-47.712 68.637-89.628 0-36.597-21.589-69.755-55.019-84.705-3.742-1.632-7.037-3.892-9.871-6.853-0.243-0.273-0.546-0.454-0.788-0.727-1.931-2.143-3.318-4.621-4.621-7.308-0.633-1.296-1.326-2.507-1.78-3.863-0.211-0.693-0.726-1.239-0.905-1.963-0.3-1.267 0-2.477-0.124-3.745-0.33-2.386-0.478-4.711-0.238-7.158 0.153-1.235 0.484-2.353 0.784-3.531 0.421-1.933 0.421-3.926 1.267-5.802 4.473-10.174 13.804-16.429 24.066-17.872 82.501-20.78 139.998-94.157 139.998-179.68v-47.838c0-17.089 13.83-30.919 30.926-30.919 17.089 0 30.919 13.83 30.919 30.919v47.838c0 94.371-52.482 177.777-132.96 219.479v0zM806.879 446.165z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="weibiaoti517" unicode="" d="M192.287933 33.601538c-15.953344 0-29.006637 13.053294-29.006637 29.007661l0 639.423111c0 15.954367 13.053294 29.007661 29.006637 29.007661l639.424134 0c15.954367 0 29.007661-13.053294 29.007661-29.007661l0-639.423111c0-15.954367-13.053294-29.007661-29.007661-29.007661L192.287933 33.601538z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="step" unicode="" d="M924.8 558.4c-22.6 53.4-54.9 101.3-96 142.4s-89 73.4-142.4 96c-55.3 23.4-113.9 35.2-174.4 35.2s-119.1-11.8-174.4-35.2c-53.4-22.6-101.3-54.9-142.4-96s-73.4-89-96-142.4c-23.4-55.3-35.2-113.9-35.2-174.4s11.8-119.1 35.2-174.4c22.6-53.4 54.9-101.3 96-142.4 41.1-41.1 89-73.4 142.4-96 55.3-23.4 113.9-35.2 174.4-35.2s119.1 11.8 174.4 35.2c53.4 22.6 101.3 54.9 142.4 96 41.1 41.1 73.4 89 96 142.4 23.4 55.3 35.2 113.9 35.2 174.4s-11.8 119.1-35.2 174.4zM869.8 232.9c-19.6-46.2-47.6-87.8-83.2-123.4s-77.2-63.7-123.4-83.2c-47.8-20.2-98.7-30.5-151.1-30.5s-103.3 10.3-151.1 30.5c-46.2 19.6-87.8 47.6-123.4 83.2s-63.7 77.2-83.2 123.4c-20.2 47.8-30.5 98.7-30.5 151.1s10.3 103.3 30.5 151.1c19.6 46.2 47.6 87.8 83.2 123.4s77.2 63.7 123.4 83.2c47.8 20.2 98.7 30.5 151.1 30.5s103.3-10.3 151.1-30.5c46.2-19.6 87.8-47.6 123.4-83.2s63.7-77.2 83.2-123.4c20.2-47.8 30.5-98.7 30.5-151.1 0-52.4-10.3-103.3-30.5-151.1zM416 512h64v-256h-64zM544 512h64v-256h-64z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="diqu" unicode="" d="M494.5 124.5l16.9-18.7 17.1 18.5c2.4 2.6 60.4 65.5 119.4 145.3C729 379.4 770.2 464.7 770.2 523.1c0 68.3-26.6 132.6-74.9 180.9-48.3 48.3-112.6 74.9-180.9 74.9s-132.7-26.6-181-74.9c-48.3-48.3-74.9-112.6-74.9-180.9 0-58.3 40.2-143.5 119.4-253.3 57.5-79.8 114.2-142.7 116.6-145.3zM304.4 523.1c0 115.7 94.1 209.8 209.8 209.8S724 638.8 724 523.1c0-25.5-11.5-60.3-34.1-103.2-19-36-45.5-77.3-79-122.6-38.7-52.4-77.7-98.1-99.3-122.7-21.1 24.5-59 70-96.6 122.1-32.7 45.4-58.7 86.7-77.3 122.8-22 43.1-33.3 78-33.3 103.6zM852.2 177.6c-35.6 15-85.9 27.4-145.4 36l-6.5-45.5c55.7-8 102-19.3 134.1-32.8 32.5-13.7 39.2-25.1 39.2-27.4 0-4.3-16.9-25.9-95.2-45.4-70.9-17.6-165.5-27.4-266.4-27.4-100.9 0-195.5 9.7-266.4 27.4-78.2 19.5-95.2 41.1-95.2 45.4 0 2.3 6.6 13.7 38.9 27.3 31.9 13.5 78 24.8 133.4 32.8l-6.6 45.5c-59.3-8.5-109.3-21-144.7-35.9-44.5-18.8-67-42.2-67-69.7 0-21.6 14-40.9 41.6-57.1 21.3-12.5 51.1-23.6 88.5-32.9 74.4-18.5 172.9-28.7 277.5-28.7s203.1 10.2 277.5 28.7c37.5 9.3 67.2 20.4 88.5 32.9 27.6 16.2 41.6 35.4 41.6 57.1 0 27.4-22.7 50.9-67.4 69.7zM511.4 436.5c48 0 87 39 87 87s-39 87-87 87-87-39-87-87 39.1-87 87-87z m0 128c22.6 0 41-18.4 41-41s-18.4-41-41-41-41 18.4-41 41 18.4 41 41 41z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="jiahao" unicode="" d="M512 896c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z m0-950.857143c-241.371429 0-438.857143 197.485714-438.857143 438.857143s197.485714 438.857143 438.857143 438.857143 438.857143-197.485714 438.857143-438.857143-197.485714-438.857143-438.857143-438.857143zM731.428571 420.571429h-182.857142v182.857142c0 21.942857-14.628571 36.571429-36.571429 36.571429s-36.571429-14.628571-36.571429-36.571429v-182.857142h-182.857142c-21.942857 0-36.571429-14.628571-36.571429-36.571429s14.628571-36.571429 36.571429-36.571429h182.857142v-182.857142c0-21.942857 14.628571-36.571429 36.571429-36.571429s36.571429 14.628571 36.571429 36.571429v182.857142h182.857142c21.942857 0 36.571429 14.628571 36.571429 36.571429s-14.628571 36.571429-36.571429 36.571429z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="riqi" unicode="" d="M861.448 662.279H732.883V798.45c0 15.378-12.443 27.822-27.821 27.822S677.24 813.83 677.24 798.45V662.28H348.604V801.249c0 15.377-12.443 27.822-27.822 27.822s-27.821-12.444-27.821-27.822v-138.97H162.55c-52.763 0-95.69-42.927-95.69-95.69v-531.97c0-52.763 42.927-95.69 95.69-95.69h698.897c52.763 0 95.69 42.927 95.69 95.69v531.97c0 52.763-42.927 95.69-95.69 95.69z m40.047-627.66c0-22.088-17.959-40.047-40.047-40.047H162.551c-22.088 0-40.047 17.959-40.047 40.047v531.97c0 22.09 17.959 40.049 40.047 40.049h698.897c22.088 0 40.047-17.96 40.047-40.048v-531.971zM288.75 410.395v-55.642h55.643v55.642h-13.91zM483.69 410.395h55.642v-55.642H483.69v55.642zM483.69 243.305h55.642v-55.643H483.69v55.643zM288.75 243.305h55.643v-55.643h-55.642v55.643zM678.41 411.264h55.642v-55.642H678.41v55.642zM678.572 243.196h55.643v-55.642h-55.643v55.642z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="jinhangzhong" unicode="" d="M551.563636 367.709091l148.945455-116.363636c16.290909-11.636364 18.618182-34.909091 6.981818-48.872728-11.636364-16.290909-34.909091-18.618182-48.872727-6.981818l-162.909091 128c-9.309091 6.981818-13.963636 16.290909-13.963636 27.927273V640c0 18.618182 16.290909 34.909091 34.90909 34.909091s34.909091-16.290909 34.909091-34.909091v-272.290909zM516.654545-128C232.727273-128 4.654545 100.072727 4.654545 384S232.727273 896 516.654545 896s512-228.072727 512-512-230.4-512-512-512z m0 46.545455c256 0 465.454545 209.454545 465.454546 465.454545s-209.454545 465.454545-465.454546 465.454545-465.454545-209.454545-465.454545-465.454545 207.127273-465.454545 465.454545-465.454545z" horiz-adv-x="1028" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="shaixuan" unicode="" d="M965.34016 781.21472c-14.0032 30.85312-44.82048 50.78528-78.50496 50.78528l-744.22272 0.01024a82.9184 82.9184 0 0 1-76.4928-50.70336c-13.79328-32.0768-7.40352-68.10112 16.5888-92.11904l2.64192-3.16928 274.79552-220.2368a23.76192 23.76192 0 0 0 9.26208-18.38592v-377.83552a84.13184 84.13184 0 0 1 44.63104-75.01824l118.96832-66.27328c13.12256-6.85056 26.64448-10.17856 41.32352-10.17856h0.06656c23.30624 0 45.00992 8.9856 61.11744 25.30304 15.85664 16.06144 24.4224 37.48352 24.12544 60.39552V445.04576a24.36608 24.36608 0 0 0 8.5248 18.304l278.7072 222.83264 3.29728 3.22048a83.57376 83.57376 0 0 1 15.17056 91.81184z m-60.0576-48.20992l-0.38912-0.52736-275.25632-221.55264c-20.10112-16.20992-31.62112-40.4736-31.62112-66.57024v-440.56064c0.0256-8.29952-4.352-16.1536-11.84256-20.72576a26.66496 26.66496 0 0 0-11.77088-2.75456 23.92064 23.92064 0 0 0-11.52 2.85696l-118.89664 65.05472c-7.30112 3.60448-11.84256 11.56608-11.84256 20.78208V446.7968c0 25.81504-11.74016 50.048-32.19968 66.48832L134.13376 725.46816l-9.32352 7.6288c-5.15584 7.28064-5.74464 16.68608-1.68448 24.2176 3.72224 8.26368 11.52 13.19424 20.85888 13.19424H886.784a23.26016 23.26016 0 0 0 20.76672-13.04576 23.5008 23.5008 0 0 0-2.26816-24.45824zM748.20608 90.30656c-16.34816 0.4352-29.50656 14.18752-29.18912 30.67904 0 17.03424 13.09696 30.81728 29.18912 30.81728h195.4048c16.09728 0 29.18912-13.77792 29.18912-30.71488a29.6192 29.6192 0 0 0-8.064-21.4272 29.50656 29.50656 0 0 0-20.736-9.33888l-0.38912-0.01536h-195.4048zM748.20608 228.08064c-16.32256 0.42496-29.47072 14.16704-29.18912 30.6176 0 17.05984 13.09696 30.86336 29.18912 30.86336h195.4048c16.09728 0 29.18912-13.80352 29.18912-30.77632a29.31712 29.31712 0 0 0-7.79776-21.29408 29.22496 29.22496 0 0 0-20.44416-9.39008l-0.9472-0.0256h-195.4048zM748.20608 365.8496c-16.32256 0.42496-29.47072 14.16704-29.18912 30.62272 0 17.024 13.09696 30.7968 29.18912 30.7968h195.4048c16.09728 0 29.18912-13.7728 29.18912-30.70976 0.3072-8.04352-2.46272-15.53408-7.79776-21.29408s-12.5952-9.09312-20.44416-9.3952l-0.98816-0.02048h-195.36384z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="renyuan" unicode="" d="M512 405.333333c-136.533333 0-247.466667 110.933333-247.466667 247.466667S375.466667 896 512 896s247.466667-110.933333 247.466667-247.466667-110.933333-243.2-247.466667-243.2zM512 810.666667C422.4 810.666667 349.866667 738.133333 349.866667 648.533333S422.4 490.666667 512 490.666667s162.133333 72.533333 162.133333 162.133333S601.6 810.666667 512 810.666667zM938.666667-128c-25.6 0-42.666667 17.066667-42.666667 42.666667 0 187.733333-170.666667 341.333333-384 341.333333s-384-153.6-384-341.333333c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666666 42.666667c0 234.666667 209.066667 426.666667 469.333333 426.666666s469.333333-192 469.333333-426.666666c0-25.6-17.066667-42.666667-42.666666-42.666667z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</font>
|
||||||
|
</defs></svg>
|
||||||
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/font/iconfont.ttf
Normal file
BIN
src/assets/font/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/iconfont.woff
Normal file
BIN
src/assets/font/iconfont.woff
Normal file
Binary file not shown.
BIN
src/assets/font/iconfont.woff2
Normal file
BIN
src/assets/font/iconfont.woff2
Normal file
Binary file not shown.
17
src/assets/font/project_iconfont.css
Normal file
17
src/assets/font/project_iconfont.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "iconfont";
|
||||||
|
src: url('project_iconfont.ttf?t=1616047723997') format('truetype');
|
||||||
|
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-warn-f:before {
|
||||||
|
content: "\e60e";
|
||||||
|
}
|
||||||
BIN
src/assets/font/project_iconfont.ttf
Normal file
BIN
src/assets/font/project_iconfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/images/icon/icon_del.png
Normal file
BIN
src/assets/images/icon/icon_del.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 632 B |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
src/assets/images/share/bg.jpg
Normal file
BIN
src/assets/images/share/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
src/assets/images/share/btn.png
Normal file
BIN
src/assets/images/share/btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
146
src/assets/shader/aurora_frag.glsl
Normal file
146
src/assets/shader/aurora_frag.glsl
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
uniform vec3 iResolution; // viewport resolution (in pixels)
|
||||||
|
uniform float iTime; // shader playback time (in seconds)
|
||||||
|
uniform vec4 iMouse;
|
||||||
|
#define time iTime
|
||||||
|
|
||||||
|
mat2 mm2(in float a){float c = cos(a), s = sin(a);return mat2(c,s,-s,c);}
|
||||||
|
mat2 m2 = mat2(0.95534, 0.29552, -0.29552, 0.95534);
|
||||||
|
float tri(in float x){return clamp(abs(fract(x)-.5),0.01,0.49);}
|
||||||
|
vec2 tri2(in vec2 p){return vec2(tri(p.x)+tri(p.y),tri(p.y+tri(p.x)));}
|
||||||
|
|
||||||
|
float triNoise2d(in vec2 p, float spd)
|
||||||
|
{
|
||||||
|
float z=1.8;
|
||||||
|
float z2=2.5;
|
||||||
|
float rz = 0.;
|
||||||
|
p *= mm2(p.x*0.06);
|
||||||
|
vec2 bp = p;
|
||||||
|
for (float i=0.; i<5.; i++ )
|
||||||
|
{
|
||||||
|
vec2 dg = tri2(bp*1.85)*.75;
|
||||||
|
dg *= mm2(time*spd);
|
||||||
|
p -= dg/z2;
|
||||||
|
|
||||||
|
bp *= 1.3;
|
||||||
|
z2 *= .45;
|
||||||
|
z *= .42;
|
||||||
|
p *= 1.21 + (rz-1.0)*.02;
|
||||||
|
|
||||||
|
rz += tri(p.x+tri(p.y))*z;
|
||||||
|
p*= -m2;
|
||||||
|
}
|
||||||
|
return clamp(1./pow(rz*29., 1.3),0.,.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
float hash21(in vec2 n){ return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); }
|
||||||
|
vec4 aurora(vec3 ro, vec3 rd)
|
||||||
|
{
|
||||||
|
vec4 col = vec4(0);
|
||||||
|
vec4 avgCol = vec4(0);
|
||||||
|
|
||||||
|
for(float i=0.;i<50.;i++)
|
||||||
|
{
|
||||||
|
float of = 0.006*hash21(gl_FragCoord.xy)*smoothstep(0.,15., i);
|
||||||
|
float pt = ((.8+pow(i,1.4)*.002)-ro.y)/(rd.y*2.+0.4);
|
||||||
|
pt -= of;
|
||||||
|
vec3 bpos = ro + pt*rd;
|
||||||
|
vec2 p = bpos.zx;
|
||||||
|
float rzt = triNoise2d(p, 0.06);
|
||||||
|
vec4 col2 = vec4(0,0,0, rzt);
|
||||||
|
col2.rgb = (sin(1.-vec3(2.15,-.5, 1.2)+i*0.043)*0.5+0.5)*rzt;
|
||||||
|
avgCol = mix(avgCol, col2, .5);
|
||||||
|
col += avgCol*exp2(-i*0.065 - 2.5)*smoothstep(0.,5., i);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
col *= (clamp(rd.y*15.+.4,0.,1.));
|
||||||
|
|
||||||
|
|
||||||
|
//return clamp(pow(col,vec4(1.3))*1.5,0.,1.);
|
||||||
|
//return clamp(pow(col,vec4(1.7))*2.,0.,1.);
|
||||||
|
//return clamp(pow(col,vec4(1.5))*2.5,0.,1.);
|
||||||
|
//return clamp(pow(col,vec4(1.8))*1.5,0.,1.);
|
||||||
|
|
||||||
|
//return smoothstep(0.,1.1,pow(col,vec4(1.))*1.5);
|
||||||
|
return col*1.8;
|
||||||
|
//return pow(col,vec4(1.))*2.
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//-------------------Background and Stars--------------------
|
||||||
|
|
||||||
|
vec3 nmzHash33(vec3 q)
|
||||||
|
{
|
||||||
|
uvec3 p = uvec3(ivec3(q));
|
||||||
|
p = p*uvec3(374761393U, 1103515245U, 668265263U) + p.zxy + p.yzx;
|
||||||
|
p = p.yzx*(p.zxy^(p >> 3U));
|
||||||
|
return vec3(p^(p >> 16U))*(1.0/vec3(0xffffffffU));
|
||||||
|
}
|
||||||
|
|
||||||
|
vec3 stars(in vec3 p)
|
||||||
|
{
|
||||||
|
vec3 c = vec3(0.);
|
||||||
|
float res = iResolution.x*1.;
|
||||||
|
|
||||||
|
for (float i=0.;i<4.;i++)
|
||||||
|
{
|
||||||
|
vec3 q = fract(p*(.15*res))-0.5;
|
||||||
|
vec3 id = floor(p*(.15*res));
|
||||||
|
vec2 rn = nmzHash33(id).xy;
|
||||||
|
float c2 = 1.-smoothstep(0.,.6,length(q));
|
||||||
|
c2 *= step(rn.x,.0005+i*i*0.001);
|
||||||
|
c += c2*(mix(vec3(1.0,0.49,0.1),vec3(0.75,0.9,1.),rn.y)*0.1+0.9);
|
||||||
|
p *= 1.3;
|
||||||
|
}
|
||||||
|
return c*c*.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
vec3 bg(in vec3 rd)
|
||||||
|
{
|
||||||
|
float sd = dot(normalize(vec3(-0.5, -0.6, 0.9)), rd)*0.5+0.5;
|
||||||
|
sd = pow(sd, 5.);
|
||||||
|
vec3 col = mix(vec3(0.05,0.1,0.2), vec3(0.1,0.05,0.2), sd);
|
||||||
|
return col*.63;
|
||||||
|
}
|
||||||
|
//-----------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
void main()
|
||||||
|
{
|
||||||
|
vec2 q = gl_FragCoord.xy / iResolution.xy;
|
||||||
|
vec2 p = q - 0.5;
|
||||||
|
p.x*=iResolution.x/iResolution.y;
|
||||||
|
|
||||||
|
vec3 ro = vec3(0,0,-6.7);
|
||||||
|
vec3 rd = normalize(vec3(p,1.3));
|
||||||
|
vec2 mo = iMouse.xy / iResolution.xy-.5;
|
||||||
|
mo = (mo==vec2(-.5))?mo=vec2(-0.1,0.1):mo;
|
||||||
|
mo.x *= iResolution.x/iResolution.y;
|
||||||
|
rd.yz *= mm2(mo.y);
|
||||||
|
rd.xz *= mm2(mo.x + sin(time*0.05)*0.2);
|
||||||
|
|
||||||
|
vec3 col = vec3(0.);
|
||||||
|
vec3 brd = rd;
|
||||||
|
float fade = smoothstep(0.,0.01,abs(brd.y))*0.1+0.9;
|
||||||
|
|
||||||
|
col = bg(rd)*fade;
|
||||||
|
|
||||||
|
if (rd.y > 0.){
|
||||||
|
vec4 aur = smoothstep(0.,1.5,aurora(ro,rd))*fade;
|
||||||
|
col += stars(rd);
|
||||||
|
col = col*(1.-aur.a) + aur.rgb;
|
||||||
|
}
|
||||||
|
else //Reflections
|
||||||
|
{
|
||||||
|
rd.y = abs(rd.y);
|
||||||
|
col = bg(rd)*fade*0.6;
|
||||||
|
vec4 aur = smoothstep(0.0,2.5,aurora(ro,rd));
|
||||||
|
col += stars(rd)*0.1;
|
||||||
|
col = col*(1.-aur.a) + aur.rgb;
|
||||||
|
vec3 pos = ro + ((0.5-ro.y)/rd.y)*rd;
|
||||||
|
float nz2 = triNoise2d(pos.xz*vec2(.5,.7), 0.);
|
||||||
|
col += mix(vec3(0.2,0.25,0.5)*0.08,vec3(0.3,0.3,0.5)*0.7, nz2*0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
gl_FragColor = vec4(col, 1.);
|
||||||
|
}
|
||||||
114
src/assets/shader/cloud2_frag.glsl
Normal file
114
src/assets/shader/cloud2_frag.glsl
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
uniform vec3 iResolution; // viewport resolution (in pixels)
|
||||||
|
uniform float iTime; // shader playback time (in seconds)
|
||||||
|
uniform vec4 iMouse;
|
||||||
|
|
||||||
|
const float cloudscale = 1.1;
|
||||||
|
const float speed = 0.03;
|
||||||
|
const float clouddark = 0.5;
|
||||||
|
const float cloudlight = 0.3;
|
||||||
|
const float cloudcover = 0.2;
|
||||||
|
const float cloudalpha = 8.0;
|
||||||
|
const float skytint = 0.5;
|
||||||
|
const vec3 skycolour1 = vec3(0.2, 0.4, 0.6);
|
||||||
|
const vec3 skycolour2 = vec3(0.4, 0.7, 1.0);
|
||||||
|
|
||||||
|
const mat2 m = mat2( 1.6, 1.2, -1.2, 1.6 );
|
||||||
|
|
||||||
|
vec2 hash( vec2 p ) {
|
||||||
|
p = vec2(dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)));
|
||||||
|
return -1.0 + 2.0*fract(sin(p)*43758.5453123);
|
||||||
|
}
|
||||||
|
|
||||||
|
float noise( in vec2 p ) {
|
||||||
|
const float K1 = 0.366025404; // (sqrt(3)-1)/2;
|
||||||
|
const float K2 = 0.211324865; // (3-sqrt(3))/6;
|
||||||
|
vec2 i = floor(p + (p.x+p.y)*K1);
|
||||||
|
vec2 a = p - i + (i.x+i.y)*K2;
|
||||||
|
vec2 o = (a.x>a.y) ? vec2(1.0,0.0) : vec2(0.0,1.0); //vec2 of = 0.5 + 0.5*vec2(sign(a.x-a.y), sign(a.y-a.x));
|
||||||
|
vec2 b = a - o + K2;
|
||||||
|
vec2 c = a - 1.0 + 2.0*K2;
|
||||||
|
vec3 h = max(0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
|
||||||
|
vec3 n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));
|
||||||
|
return dot(n, vec3(70.0));
|
||||||
|
}
|
||||||
|
|
||||||
|
float fbm(vec2 n) {
|
||||||
|
float total = 0.0, amplitude = 0.1;
|
||||||
|
for (int i = 0; i < 7; i++) {
|
||||||
|
total += noise(n) * amplitude;
|
||||||
|
n = m * n;
|
||||||
|
amplitude *= 0.4;
|
||||||
|
}
|
||||||
|
return total;
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vec2 p = gl_FragCoord.xy / iResolution.xy;
|
||||||
|
vec2 uv = p*vec2(iResolution.x/iResolution.y,1.0);
|
||||||
|
float time = iTime * speed;
|
||||||
|
float q = fbm(uv * cloudscale * 0.5);
|
||||||
|
|
||||||
|
//ridged noise shape
|
||||||
|
float r = 0.0;
|
||||||
|
uv *= cloudscale;
|
||||||
|
uv -= q - time;
|
||||||
|
float weight = 0.8;
|
||||||
|
for (int i=0; i<8; i++){
|
||||||
|
r += abs(weight*noise( uv ));
|
||||||
|
uv = m*uv + time;
|
||||||
|
weight *= 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
//noise shape
|
||||||
|
float f = 0.0;
|
||||||
|
uv = p*vec2(iResolution.x/iResolution.y,1.0);
|
||||||
|
uv *= cloudscale;
|
||||||
|
uv -= q - time;
|
||||||
|
weight = 0.7;
|
||||||
|
for (int i=0; i<8; i++){
|
||||||
|
f += weight*noise( uv );
|
||||||
|
uv = m*uv + time;
|
||||||
|
weight *= 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
f *= r + f;
|
||||||
|
|
||||||
|
//noise colour
|
||||||
|
float c = 0.0;
|
||||||
|
time = iTime * speed * 2.0;
|
||||||
|
uv = p*vec2(iResolution.x/iResolution.y,1.0);
|
||||||
|
uv *= cloudscale*2.0;
|
||||||
|
uv -= q - time;
|
||||||
|
weight = 0.4;
|
||||||
|
for (int i=0; i<7; i++){
|
||||||
|
c += weight*noise( uv );
|
||||||
|
uv = m*uv + time;
|
||||||
|
weight *= 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
//noise ridge colour
|
||||||
|
float c1 = 0.0;
|
||||||
|
time = iTime * speed * 3.0;
|
||||||
|
uv = p*vec2(iResolution.x/iResolution.y,1.0);
|
||||||
|
uv *= cloudscale*3.0;
|
||||||
|
uv -= q - time;
|
||||||
|
weight = 0.4;
|
||||||
|
for (int i=0; i<7; i++){
|
||||||
|
c1 += abs(weight*noise( uv ));
|
||||||
|
uv = m*uv + time;
|
||||||
|
weight *= 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
c += c1;
|
||||||
|
|
||||||
|
vec3 skycolour = mix(skycolour2, skycolour1, p.y);
|
||||||
|
vec3 cloudcolour = vec3(1.1, 1.1, 0.9) * clamp((clouddark + cloudlight*c), 0.0, 1.0);
|
||||||
|
|
||||||
|
f = cloudcover + cloudalpha*f*r;
|
||||||
|
|
||||||
|
vec3 result = mix(skycolour, clamp(skytint * skycolour + cloudcolour, 0.0, 1.0), clamp(f + c, 0.0, 1.0));
|
||||||
|
|
||||||
|
gl_FragColor = vec4( result, 1.0 );
|
||||||
|
}
|
||||||
126
src/assets/shader/cloud_frag.glsl
Normal file
126
src/assets/shader/cloud_frag.glsl
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
uniform vec3 iResolution; // viewport resolution (in pixels)
|
||||||
|
uniform float iTime; // shader playback time (in seconds)
|
||||||
|
uniform vec4 iMouse;
|
||||||
|
|
||||||
|
mat2 rot(in float a){float c = cos(a), s = sin(a);return mat2(c,s,-s,c);}
|
||||||
|
const mat3 m3 = mat3(0.33338, 0.56034, -0.71817, -0.87887, 0.32651, -0.15323, 0.15162, 0.69596, 0.61339)*1.93;
|
||||||
|
float mag2(vec2 p){return dot(p,p);}
|
||||||
|
float linstep(in float mn, in float mx, in float x){ return clamp((x - mn)/(mx - mn), 0., 1.); }
|
||||||
|
float prm1 = 0.;
|
||||||
|
vec2 bsMo = vec2(0);
|
||||||
|
|
||||||
|
vec2 disp(float t){ return vec2(sin(t*0.22)*1., cos(t*0.175)*1.)*2.; }
|
||||||
|
|
||||||
|
vec2 map(vec3 p)
|
||||||
|
{
|
||||||
|
vec3 p2 = p;
|
||||||
|
p2.xy -= disp(p.z).xy;
|
||||||
|
p.xy *= rot(sin(p.z+iTime)*(0.1 + prm1*0.05) + iTime*0.09);
|
||||||
|
float cl = mag2(p2.xy);
|
||||||
|
float d = 0.;
|
||||||
|
p *= .61;
|
||||||
|
float z = 1.;
|
||||||
|
float trk = 1.;
|
||||||
|
float dspAmp = 0.1 + prm1*0.2;
|
||||||
|
for(int i = 0; i < 5; i++)
|
||||||
|
{
|
||||||
|
p += sin(p.zxy*0.75*trk + iTime*trk*.8)*dspAmp;
|
||||||
|
d -= abs(dot(cos(p), sin(p.yzx))*z);
|
||||||
|
z *= 0.57;
|
||||||
|
trk *= 1.4;
|
||||||
|
p = p*m3;
|
||||||
|
}
|
||||||
|
d = abs(d + prm1*3.)+ prm1*.3 - 2.5 + bsMo.y;
|
||||||
|
return vec2(d + cl*.2 + 0.25, cl);
|
||||||
|
}
|
||||||
|
|
||||||
|
vec4 render( in vec3 ro, in vec3 rd, float time )
|
||||||
|
{
|
||||||
|
vec4 rez = vec4(0);
|
||||||
|
const float ldst = 8.;
|
||||||
|
vec3 lpos = vec3(disp(time + ldst)*0.5, time + ldst);
|
||||||
|
float t = 1.5;
|
||||||
|
float fogT = 0.;
|
||||||
|
for(int i=0; i<130; i++)
|
||||||
|
{
|
||||||
|
if(rez.a > 0.99)break;
|
||||||
|
|
||||||
|
vec3 pos = ro + t*rd;
|
||||||
|
vec2 mpv = map(pos);
|
||||||
|
float den = clamp(mpv.x-0.3,0.,1.)*1.12;
|
||||||
|
float dn = clamp((mpv.x + 2.),0.,3.);
|
||||||
|
|
||||||
|
vec4 col = vec4(0);
|
||||||
|
if (mpv.x > 0.6)
|
||||||
|
{
|
||||||
|
|
||||||
|
col = vec4(sin(vec3(5.,0.4,0.2) + mpv.y*0.1 +sin(pos.z*0.4)*0.5 + 1.8)*0.5 + 0.5,0.08);
|
||||||
|
col *= den*den*den;
|
||||||
|
col.rgb *= linstep(4.,-2.5, mpv.x)*2.3;
|
||||||
|
float dif = clamp((den - map(pos+.8).x)/9., 0.001, 1. );
|
||||||
|
dif += clamp((den - map(pos+.35).x)/2.5, 0.001, 1. );
|
||||||
|
col.xyz *= den*(vec3(0.005,.045,.075) + 1.5*vec3(0.033,0.07,0.03)*dif);
|
||||||
|
}
|
||||||
|
|
||||||
|
float fogC = exp(t*0.2 - 2.2);
|
||||||
|
col.rgba += vec4(0.06,0.11,0.11, 0.1)*clamp(fogC-fogT, 0., 1.);
|
||||||
|
fogT = fogC;
|
||||||
|
rez = rez + col*(1. - rez.a);
|
||||||
|
t += clamp(0.5 - dn*dn*.05, 0.09, 0.3);
|
||||||
|
}
|
||||||
|
return clamp(rez, 0.0, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
float getsat(vec3 c)
|
||||||
|
{
|
||||||
|
float mi = min(min(c.x, c.y), c.z);
|
||||||
|
float ma = max(max(c.x, c.y), c.z);
|
||||||
|
return (ma - mi)/(ma+ 1e-7);
|
||||||
|
}
|
||||||
|
|
||||||
|
//from my "Will it blend" shader (https://www.shadertoy.com/view/lsdGzN)
|
||||||
|
vec3 iLerp(in vec3 a, in vec3 b, in float x)
|
||||||
|
{
|
||||||
|
vec3 ic = mix(a, b, x) + vec3(1e-6,0.,0.);
|
||||||
|
float sd = abs(getsat(ic) - mix(getsat(a), getsat(b), x));
|
||||||
|
vec3 dir = normalize(vec3(2.*ic.x - ic.y - ic.z, 2.*ic.y - ic.x - ic.z, 2.*ic.z - ic.y - ic.x));
|
||||||
|
float lgt = dot(vec3(1.0), ic);
|
||||||
|
float ff = dot(dir, normalize(ic));
|
||||||
|
ic += 1.5*dir*sd*ff*lgt;
|
||||||
|
return clamp(ic,0.,1.);
|
||||||
|
}
|
||||||
|
|
||||||
|
void main()
|
||||||
|
{
|
||||||
|
vec2 q = gl_FragCoord.xy/iResolution.xy;
|
||||||
|
vec2 p = (gl_FragCoord.xy - 0.5*iResolution.xy)/iResolution.y;
|
||||||
|
bsMo = (iMouse.xy - 0.5*iResolution.xy)/iResolution.y;
|
||||||
|
|
||||||
|
float time = iTime*3.;
|
||||||
|
vec3 ro = vec3(0,0,time);
|
||||||
|
|
||||||
|
ro += vec3(sin(iTime)*0.5,sin(iTime*1.)*0.,0);
|
||||||
|
|
||||||
|
float dspAmp = .85;
|
||||||
|
ro.xy += disp(ro.z)*dspAmp;
|
||||||
|
float tgtDst = 3.5;
|
||||||
|
|
||||||
|
vec3 target = normalize(ro - vec3(disp(time + tgtDst)*dspAmp, time + tgtDst));
|
||||||
|
ro.x -= bsMo.x*2.;
|
||||||
|
vec3 rightdir = normalize(cross(target, vec3(0,1,0)));
|
||||||
|
vec3 updir = normalize(cross(rightdir, target));
|
||||||
|
rightdir = normalize(cross(updir, target));
|
||||||
|
vec3 rd=normalize((p.x*rightdir + p.y*updir)*1. - target);
|
||||||
|
rd.xy *= rot(-disp(time + 3.5).x*0.2 + bsMo.x);
|
||||||
|
prm1 = smoothstep(-0.4, 0.4,sin(iTime*0.3));
|
||||||
|
vec4 scn = render(ro, rd, time);
|
||||||
|
|
||||||
|
vec3 col = scn.rgb;
|
||||||
|
col = iLerp(col.bgr, col.rgb, clamp(1.-prm1,0.05,1.));
|
||||||
|
|
||||||
|
col = pow(col, vec3(.55,0.65,0.6))*vec3(1.,.97,.9);
|
||||||
|
|
||||||
|
col *= pow( 16.0*q.x*q.y*(1.0-q.x)*(1.0-q.y), 0.12)*0.7+0.3; //Vign
|
||||||
|
|
||||||
|
gl_FragColor = vec4( col, 1.0 );
|
||||||
|
}
|
||||||
3
src/assets/shader/cloud_vertex.glsl
Normal file
3
src/assets/shader/cloud_vertex.glsl
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
void main() {
|
||||||
|
gl_Position = vec4( position, 1.0 );
|
||||||
|
}
|
||||||
10
src/assets/shader/color_fragment.glsl
Normal file
10
src/assets/shader/color_fragment.glsl
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
uniform sampler2D baseTexture;
|
||||||
|
uniform sampler2D bloomTexture;
|
||||||
|
|
||||||
|
varying vec2 vUv;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
|
||||||
|
gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
|
||||||
|
|
||||||
|
}
|
||||||
9
src/assets/shader/color_vertex.glsl
Normal file
9
src/assets/shader/color_vertex.glsl
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
varying vec2 vUv;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
|
||||||
|
vUv = uv;
|
||||||
|
|
||||||
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
||||||
|
|
||||||
|
}
|
||||||
353
src/assets/shader/rain_frag.glsl
Normal file
353
src/assets/shader/rain_frag.glsl
Normal file
@ -0,0 +1,353 @@
|
|||||||
|
|
||||||
|
uniform vec3 iResolution; // viewport resolution (in pixels)
|
||||||
|
uniform float iTime; // shader playback time (in seconds)
|
||||||
|
uniform vec4 iMouse;
|
||||||
|
|
||||||
|
#define S(x, y, z) smoothstep(x, y, z)
|
||||||
|
#define B(a, b, edge, t) S(a-edge, a+edge, t)*S(b+edge, b-edge, t)
|
||||||
|
#define sat(x) clamp(x,0.,1.)
|
||||||
|
|
||||||
|
#define streetLightCol vec3(1., .7, .3)
|
||||||
|
#define headLightCol vec3(.8, .8, 1.)
|
||||||
|
#define tailLightCol vec3(1., .1, .1)
|
||||||
|
|
||||||
|
#define HIGH_QUALITY
|
||||||
|
#define CAM_SHAKE 1.
|
||||||
|
#define LANE_BIAS .5
|
||||||
|
#define RAIN
|
||||||
|
//#define DROP_DEBUG
|
||||||
|
|
||||||
|
vec3 ro, rd;
|
||||||
|
|
||||||
|
float N(float t) {
|
||||||
|
return fract(sin(t*10234.324)*123423.23512);
|
||||||
|
}
|
||||||
|
vec3 N31(float p) {
|
||||||
|
// 3 out, 1 in... DAVE HOSKINS
|
||||||
|
vec3 p3 = fract(vec3(p) * vec3(.1031,.11369,.13787));
|
||||||
|
p3 += dot(p3, p3.yzx + 19.19);
|
||||||
|
return fract(vec3((p3.x + p3.y)*p3.z, (p3.x+p3.z)*p3.y, (p3.y+p3.z)*p3.x));
|
||||||
|
}
|
||||||
|
float N2(vec2 p)
|
||||||
|
{ // Dave Hoskins - https://www.shadertoy.com/view/4djSRW
|
||||||
|
vec3 p3 = fract(vec3(p.xyx) * vec3(443.897, 441.423, 437.195));
|
||||||
|
p3 += dot(p3, p3.yzx + 19.19);
|
||||||
|
return fract((p3.x + p3.y) * p3.z);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
float DistLine(vec3 ro, vec3 rd, vec3 p) {
|
||||||
|
return length(cross(p-ro, rd));
|
||||||
|
}
|
||||||
|
|
||||||
|
vec3 ClosestPoint(vec3 ro, vec3 rd, vec3 p) {
|
||||||
|
// returns the closest point on ray r to point p
|
||||||
|
return ro + max(0., dot(p-ro, rd))*rd;
|
||||||
|
}
|
||||||
|
|
||||||
|
float Remap(float a, float b, float c, float d, float t) {
|
||||||
|
return ((t-a)/(b-a))*(d-c)+c;
|
||||||
|
}
|
||||||
|
|
||||||
|
float BokehMask(vec3 ro, vec3 rd, vec3 p, float size, float blur) {
|
||||||
|
float d = DistLine(ro, rd, p);
|
||||||
|
float m = S(size, size*(1.-blur), d);
|
||||||
|
|
||||||
|
#ifdef HIGH_QUALITY
|
||||||
|
m *= mix(.7, 1., S(.8*size, size, d));
|
||||||
|
#endif
|
||||||
|
|
||||||
|
return m;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
float SawTooth(float t) {
|
||||||
|
return cos(t+cos(t))+sin(2.*t)*.2+sin(4.*t)*.02;
|
||||||
|
}
|
||||||
|
|
||||||
|
float DeltaSawTooth(float t) {
|
||||||
|
return 0.4*cos(2.*t)+0.08*cos(4.*t) - (1.-sin(t))*sin(t+cos(t));
|
||||||
|
}
|
||||||
|
|
||||||
|
vec2 GetDrops(vec2 uv, float seed, float m) {
|
||||||
|
|
||||||
|
float t = iTime+m*30.;
|
||||||
|
vec2 o = vec2(0.);
|
||||||
|
|
||||||
|
#ifndef DROP_DEBUG
|
||||||
|
uv.y += t*.05;
|
||||||
|
#endif
|
||||||
|
|
||||||
|
uv *= vec2(10., 2.5)*2.;
|
||||||
|
vec2 id = floor(uv);
|
||||||
|
vec3 n = N31(id.x + (id.y+seed)*546.3524);
|
||||||
|
vec2 bd = fract(uv);
|
||||||
|
|
||||||
|
vec2 uv2 = bd;
|
||||||
|
|
||||||
|
bd -= .5;
|
||||||
|
|
||||||
|
bd.y*=4.;
|
||||||
|
|
||||||
|
bd.x += (n.x-.5)*.6;
|
||||||
|
|
||||||
|
t += n.z * 6.28;
|
||||||
|
float slide = SawTooth(t);
|
||||||
|
|
||||||
|
float ts = 1.5;
|
||||||
|
vec2 trailPos = vec2(bd.x*ts, (fract(bd.y*ts*2.-t*2.)-.5)*.5);
|
||||||
|
|
||||||
|
bd.y += slide*2.; // make drops slide down
|
||||||
|
|
||||||
|
#ifdef HIGH_QUALITY
|
||||||
|
float dropShape = bd.x*bd.x;
|
||||||
|
dropShape *= DeltaSawTooth(t);
|
||||||
|
bd.y += dropShape; // change shape of drop when it is falling
|
||||||
|
#endif
|
||||||
|
|
||||||
|
float d = length(bd); // distance to main drop
|
||||||
|
|
||||||
|
float trailMask = S(-.2, .2, bd.y); // mask out drops that are below the main
|
||||||
|
trailMask *= bd.y; // fade dropsize
|
||||||
|
float td = length(trailPos*max(.5, trailMask)); // distance to trail drops
|
||||||
|
|
||||||
|
float mainDrop = S(.2, .1, d);
|
||||||
|
float dropTrail = S(.1, .02, td);
|
||||||
|
|
||||||
|
dropTrail *= trailMask;
|
||||||
|
o = mix(bd*mainDrop, trailPos, dropTrail); // mix main drop and drop trail
|
||||||
|
|
||||||
|
#ifdef DROP_DEBUG
|
||||||
|
if(uv2.x<.02 || uv2.y<.01) o = vec2(1.);
|
||||||
|
#endif
|
||||||
|
|
||||||
|
return o;
|
||||||
|
}
|
||||||
|
|
||||||
|
void CameraSetup(vec2 uv, vec3 pos, vec3 lookat, float zoom, float m) {
|
||||||
|
ro = pos;
|
||||||
|
vec3 f = normalize(lookat-ro);
|
||||||
|
vec3 r = cross(vec3(0., 1., 0.), f);
|
||||||
|
vec3 u = cross(f, r);
|
||||||
|
float t = iTime;
|
||||||
|
|
||||||
|
vec2 offs = vec2(0.);
|
||||||
|
#ifdef RAIN
|
||||||
|
vec2 dropUv = uv;
|
||||||
|
|
||||||
|
#ifdef HIGH_QUALITY
|
||||||
|
float x = (sin(t*.1)*.5+.5)*.5;
|
||||||
|
x = -x*x;
|
||||||
|
float s = sin(x);
|
||||||
|
float c = cos(x);
|
||||||
|
|
||||||
|
mat2 rot = mat2(c, -s, s, c);
|
||||||
|
|
||||||
|
#ifndef DROP_DEBUG
|
||||||
|
dropUv = uv*rot;
|
||||||
|
dropUv.x += -sin(t*.1)*.5;
|
||||||
|
#endif
|
||||||
|
#endif
|
||||||
|
|
||||||
|
offs = GetDrops(dropUv, 1., m);
|
||||||
|
|
||||||
|
#ifndef DROP_DEBUG
|
||||||
|
offs += GetDrops(dropUv*1.4, 10., m);
|
||||||
|
#ifdef HIGH_QUALITY
|
||||||
|
offs += GetDrops(dropUv*2.4, 25., m);
|
||||||
|
//offs += GetDrops(dropUv*3.4, 11.);
|
||||||
|
//offs += GetDrops(dropUv*3., 2.);
|
||||||
|
#endif
|
||||||
|
|
||||||
|
float ripple = sin(t+uv.y*3.1415*30.+uv.x*124.)*.5+.5;
|
||||||
|
ripple *= .005;
|
||||||
|
offs += vec2(ripple*ripple, ripple);
|
||||||
|
#endif
|
||||||
|
#endif
|
||||||
|
vec3 center = ro + f*zoom;
|
||||||
|
vec3 i = center + (uv.x-offs.x)*r + (uv.y-offs.y)*u;
|
||||||
|
|
||||||
|
rd = normalize(i-ro);
|
||||||
|
}
|
||||||
|
|
||||||
|
vec3 HeadLights(float i, float t) {
|
||||||
|
float z = fract(-t*2.+i);
|
||||||
|
vec3 p = vec3(-.3, .1, z*40.);
|
||||||
|
float d = length(p-ro);
|
||||||
|
|
||||||
|
float size = mix(.03, .05, S(.02, .07, z))*d;
|
||||||
|
float m = 0.;
|
||||||
|
float blur = .1;
|
||||||
|
m += BokehMask(ro, rd, p-vec3(.08, 0., 0.), size, blur);
|
||||||
|
m += BokehMask(ro, rd, p+vec3(.08, 0., 0.), size, blur);
|
||||||
|
|
||||||
|
#ifdef HIGH_QUALITY
|
||||||
|
m += BokehMask(ro, rd, p+vec3(.1, 0., 0.), size, blur);
|
||||||
|
m += BokehMask(ro, rd, p-vec3(.1, 0., 0.), size, blur);
|
||||||
|
#endif
|
||||||
|
|
||||||
|
float distFade = max(.01, pow(1.-z, 9.));
|
||||||
|
|
||||||
|
blur = .8;
|
||||||
|
size *= 2.5;
|
||||||
|
float r = 0.;
|
||||||
|
r += BokehMask(ro, rd, p+vec3(-.09, -.2, 0.), size, blur);
|
||||||
|
r += BokehMask(ro, rd, p+vec3(.09, -.2, 0.), size, blur);
|
||||||
|
r *= distFade*distFade;
|
||||||
|
|
||||||
|
return headLightCol*(m+r)*distFade;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
vec3 TailLights(float i, float t) {
|
||||||
|
t = t*1.5+i;
|
||||||
|
|
||||||
|
float id = floor(t)+i;
|
||||||
|
vec3 n = N31(id);
|
||||||
|
|
||||||
|
float laneId = S(LANE_BIAS, LANE_BIAS+.01, n.y);
|
||||||
|
|
||||||
|
float ft = fract(t);
|
||||||
|
|
||||||
|
float z = 3.-ft*3.; // distance ahead
|
||||||
|
|
||||||
|
laneId *= S(.2, 1.5, z); // get out of the way!
|
||||||
|
float lane = mix(.6, .3, laneId);
|
||||||
|
vec3 p = vec3(lane, .1, z);
|
||||||
|
float d = length(p-ro);
|
||||||
|
|
||||||
|
float size = .05*d;
|
||||||
|
float blur = .1;
|
||||||
|
float m = BokehMask(ro, rd, p-vec3(.08, 0., 0.), size, blur) +
|
||||||
|
BokehMask(ro, rd, p+vec3(.08, 0., 0.), size, blur);
|
||||||
|
|
||||||
|
#ifdef HIGH_QUALITY
|
||||||
|
float bs = n.z*3.; // start braking at random distance
|
||||||
|
float brake = S(bs, bs+.01, z);
|
||||||
|
brake *= S(bs+.01, bs, z-.5*n.y); // n.y = random brake duration
|
||||||
|
|
||||||
|
m += (BokehMask(ro, rd, p+vec3(.1, 0., 0.), size, blur) +
|
||||||
|
BokehMask(ro, rd, p-vec3(.1, 0., 0.), size, blur))*brake;
|
||||||
|
#endif
|
||||||
|
|
||||||
|
float refSize = size*2.5;
|
||||||
|
m += BokehMask(ro, rd, p+vec3(-.09, -.2, 0.), refSize, .8);
|
||||||
|
m += BokehMask(ro, rd, p+vec3(.09, -.2, 0.), refSize, .8);
|
||||||
|
vec3 col = tailLightCol*m*ft;
|
||||||
|
|
||||||
|
float b = BokehMask(ro, rd, p+vec3(.12, 0., 0.), size, blur);
|
||||||
|
b += BokehMask(ro, rd, p+vec3(.12, -.2, 0.), refSize, .8)*.2;
|
||||||
|
|
||||||
|
vec3 blinker = vec3(1., .7, .2);
|
||||||
|
blinker *= S(1.5, 1.4, z)*S(.2, .3, z);
|
||||||
|
blinker *= sat(sin(t*200.)*100.);
|
||||||
|
blinker *= laneId;
|
||||||
|
col += blinker*b;
|
||||||
|
|
||||||
|
return col;
|
||||||
|
}
|
||||||
|
|
||||||
|
vec3 StreetLights(float i, float t) {
|
||||||
|
float side = sign(rd.x);
|
||||||
|
float offset = max(side, 0.)*(1./16.);
|
||||||
|
float z = fract(i-t+offset);
|
||||||
|
vec3 p = vec3(2.*side, 2., z*60.);
|
||||||
|
float d = length(p-ro);
|
||||||
|
float blur = .1;
|
||||||
|
vec3 rp = ClosestPoint(ro, rd, p);
|
||||||
|
float distFade = Remap(1., .7, .1, 1.5, 1.-pow(1.-z,6.));
|
||||||
|
distFade *= (1.-z);
|
||||||
|
float m = BokehMask(ro, rd, p, .05*d, blur)*distFade;
|
||||||
|
|
||||||
|
return m*streetLightCol;
|
||||||
|
}
|
||||||
|
|
||||||
|
vec3 EnvironmentLights(float i, float t) {
|
||||||
|
float n = N(i+floor(t));
|
||||||
|
|
||||||
|
float side = sign(rd.x);
|
||||||
|
float offset = max(side, 0.)*(1./16.);
|
||||||
|
float z = fract(i-t+offset+fract(n*234.));
|
||||||
|
float n2 = fract(n*100.);
|
||||||
|
vec3 p = vec3((3.+n)*side, n2*n2*n2*1., z*60.);
|
||||||
|
float d = length(p-ro);
|
||||||
|
float blur = .1;
|
||||||
|
vec3 rp = ClosestPoint(ro, rd, p);
|
||||||
|
float distFade = Remap(1., .7, .1, 1.5, 1.-pow(1.-z,6.));
|
||||||
|
float m = BokehMask(ro, rd, p, .05*d, blur);
|
||||||
|
m *= distFade*distFade*.5;
|
||||||
|
|
||||||
|
m *= 1.-pow(sin(z*6.28*20.*n)*.5+.5, 20.);
|
||||||
|
vec3 randomCol = vec3(fract(n*-34.5), fract(n*4572.), fract(n*1264.));
|
||||||
|
vec3 col = mix(tailLightCol, streetLightCol, fract(n*-65.42));
|
||||||
|
col = mix(col, randomCol, n);
|
||||||
|
return m*col*.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
void main()
|
||||||
|
{
|
||||||
|
float t = iTime;
|
||||||
|
vec3 col = vec3(0.);
|
||||||
|
vec2 uv = gl_FragCoord.xy / iResolution.xy; // 0 <> 1
|
||||||
|
|
||||||
|
uv -= .5;
|
||||||
|
uv.x *= iResolution.x/iResolution.y;
|
||||||
|
|
||||||
|
vec2 mouse = iMouse.xy/iResolution.xy;
|
||||||
|
|
||||||
|
vec3 pos = vec3(.3, .15, 0.);
|
||||||
|
|
||||||
|
float bt = t * 5.;
|
||||||
|
float h1 = N(floor(bt));
|
||||||
|
float h2 = N(floor(bt+1.));
|
||||||
|
float bumps = mix(h1, h2, fract(bt))*.1;
|
||||||
|
bumps = bumps*bumps*bumps*CAM_SHAKE;
|
||||||
|
|
||||||
|
pos.y += bumps;
|
||||||
|
float lookatY = pos.y+bumps;
|
||||||
|
vec3 lookat = vec3(0.3, lookatY, 1.);
|
||||||
|
vec3 lookat2 = vec3(0., lookatY, .7);
|
||||||
|
lookat = mix(lookat, lookat2, sin(t*.1)*.5+.5);
|
||||||
|
|
||||||
|
uv.y += bumps*4.;
|
||||||
|
CameraSetup(uv, pos, lookat, 2., mouse.x);
|
||||||
|
|
||||||
|
t *= .03;
|
||||||
|
t += mouse.x;
|
||||||
|
|
||||||
|
// fix for GLES devices by MacroMachines
|
||||||
|
#ifdef GL_ES
|
||||||
|
const float stp = 1./8.;
|
||||||
|
#else
|
||||||
|
float stp = 1./8.
|
||||||
|
#endif
|
||||||
|
|
||||||
|
for(float i=0.; i<1.; i+=stp) {
|
||||||
|
col += StreetLights(i, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
for(float i=0.; i<1.; i+=stp) {
|
||||||
|
float n = N(i+floor(t));
|
||||||
|
col += HeadLights(i+n*stp*.7, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
#ifndef GL_ES
|
||||||
|
#ifdef HIGH_QUALITY
|
||||||
|
stp = 1./32.;
|
||||||
|
#else
|
||||||
|
stp = 1./16.;
|
||||||
|
#endif
|
||||||
|
#endif
|
||||||
|
|
||||||
|
for(float i=0.; i<1.; i+=stp) {
|
||||||
|
col += EnvironmentLights(i, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
col += TailLights(0., t);
|
||||||
|
col += TailLights(.5, t);
|
||||||
|
|
||||||
|
col += sat(rd.y)*vec3(.6, .5, .9);
|
||||||
|
|
||||||
|
gl_FragColor = vec4(col, 0.);
|
||||||
|
}
|
||||||
105
src/assets/shader/star_frag.glsl
Normal file
105
src/assets/shader/star_frag.glsl
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
uniform vec3 iResolution; // viewport resolution (in pixels)
|
||||||
|
uniform float iTime; // shader playback time (in seconds)
|
||||||
|
uniform vec4 iMouse;
|
||||||
|
precision highp float;
|
||||||
|
|
||||||
|
|
||||||
|
float gTime = 0.;
|
||||||
|
const float REPEAT = 5.0;
|
||||||
|
|
||||||
|
// 回転行列
|
||||||
|
mat2 rot(float a) {
|
||||||
|
float c = cos(a), s = sin(a);
|
||||||
|
return mat2(c,s,-s,c);
|
||||||
|
}
|
||||||
|
|
||||||
|
float sdBox( vec3 p, vec3 b )
|
||||||
|
{
|
||||||
|
vec3 q = abs(p) - b;
|
||||||
|
return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
float box(vec3 pos, float scale) {
|
||||||
|
pos *= scale;
|
||||||
|
float base = sdBox(pos, vec3(.4,.4,.1)) /1.5;
|
||||||
|
pos.xy *= 5.;
|
||||||
|
pos.y -= 3.5;
|
||||||
|
pos.xy *= rot(.75);
|
||||||
|
float result = -base;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
float box_set(vec3 pos, float iTime) {
|
||||||
|
vec3 pos_origin = pos;
|
||||||
|
pos = pos_origin;
|
||||||
|
pos .y += sin(gTime * 0.4) * 2.5;
|
||||||
|
pos.xy *= rot(.8);
|
||||||
|
float box1 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);
|
||||||
|
pos = pos_origin;
|
||||||
|
pos .y -=sin(gTime * 0.4) * 2.5;
|
||||||
|
pos.xy *= rot(.8);
|
||||||
|
float box2 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);
|
||||||
|
pos = pos_origin;
|
||||||
|
pos .x +=sin(gTime * 0.4) * 2.5;
|
||||||
|
pos.xy *= rot(.8);
|
||||||
|
float box3 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);
|
||||||
|
pos = pos_origin;
|
||||||
|
pos .x -=sin(gTime * 0.4) * 2.5;
|
||||||
|
pos.xy *= rot(.8);
|
||||||
|
float box4 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);
|
||||||
|
pos = pos_origin;
|
||||||
|
pos.xy *= rot(.8);
|
||||||
|
float box5 = box(pos,.5) * 6.;
|
||||||
|
pos = pos_origin;
|
||||||
|
float box6 = box(pos,.5) * 6.;
|
||||||
|
float result = max(max(max(max(max(box1,box2),box3),box4),box5),box6);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
float map(vec3 pos, float iTime) {
|
||||||
|
vec3 pos_origin = pos;
|
||||||
|
float box_set1 = box_set(pos, iTime);
|
||||||
|
|
||||||
|
return box_set1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vec2 p = (gl_FragCoord.xy * 2. - iResolution.xy) / min(iResolution.x, iResolution.y);
|
||||||
|
vec3 ro = vec3(0., -0.2 ,iTime * 4.);
|
||||||
|
vec3 ray = normalize(vec3(p, 1.5));
|
||||||
|
ray.xy = ray.xy * rot(sin(iTime * .03) * 5.);
|
||||||
|
ray.yz = ray.yz * rot(sin(iTime * .05) * .2);
|
||||||
|
float t = 0.1;
|
||||||
|
vec3 col = vec3(0.);
|
||||||
|
float ac = 0.0;
|
||||||
|
|
||||||
|
|
||||||
|
for (int i = 0; i < 99; i++){
|
||||||
|
vec3 pos = ro + ray * t;
|
||||||
|
pos = mod(pos-2., 4.) -2.;
|
||||||
|
gTime = iTime -float(i) * 0.01;
|
||||||
|
|
||||||
|
float d = map(pos, iTime);
|
||||||
|
|
||||||
|
d = max(abs(d), 0.01);
|
||||||
|
ac += exp(-d*23.);
|
||||||
|
|
||||||
|
t += d* 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
col = vec3(ac * 0.02);
|
||||||
|
|
||||||
|
col +=vec3(0.,0.2 * abs(sin(iTime)),0.5 + sin(iTime) * 0.2);
|
||||||
|
|
||||||
|
|
||||||
|
gl_FragColor = vec4(col ,1.0 - t * (0.02 + 0.02 * sin (iTime)));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** SHADERDATA
|
||||||
|
{
|
||||||
|
"title": "Octgrams",
|
||||||
|
"description": "Lorem ipsum dolor",
|
||||||
|
"model": "person"
|
||||||
|
}
|
||||||
|
*/
|
||||||
24
src/assets/shader/through_frag.glsl
Normal file
24
src/assets/shader/through_frag.glsl
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
uniform vec3 iResolution; // viewport resolution (in pixels)
|
||||||
|
uniform float iTime; // shader playback time (in seconds)
|
||||||
|
uniform vec4 iMouse;
|
||||||
|
uniform sampler2D iChannel0;
|
||||||
|
uniform vec4 iDate;
|
||||||
|
|
||||||
|
void main()
|
||||||
|
{
|
||||||
|
vec4 O;
|
||||||
|
vec2 U;
|
||||||
|
float h = iResolution.y; U = 4.*(U+iMouse.xy)/h; // normalized coordinates
|
||||||
|
vec2 K = ceil(U); U = 2.*fract(U)-1.; // or K = 1.+2.*floor(U) to avoid non-fractionals
|
||||||
|
float a = atan(U.y,U.x), r=length(U), v=0., A; // polar coordinates
|
||||||
|
|
||||||
|
for(int i=0; i<7; i++)
|
||||||
|
// if fractional, there is K.y turns to close the loop via K.x wings.
|
||||||
|
v = max(v, ( 1. + .8* cos(A= K.x/K.y*a + iTime) ) / 1.8 // 1+cos(A) = depth-shading
|
||||||
|
* smoothstep(1., 1.-120./h, 8.*abs(r-.2*sin(A)-.5))), // ribbon (antialiased)
|
||||||
|
a += 6.28; // next turn
|
||||||
|
|
||||||
|
|
||||||
|
O = v*vec4(.8,1,.3,1); O.g = sqrt(O.g); // greenify
|
||||||
|
//O = v*(.5+.5*sin(K.x+17.*K.y+iDate.w+vec4(0,2.1,-2.1,0))); // random colors
|
||||||
|
}
|
||||||
150
src/axios/http.js
Normal file
150
src/axios/http.js
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
import qs from 'qs'
|
||||||
|
// import store from 'store/index'
|
||||||
|
// import { Indicator, Toast } from 'mint-ui'
|
||||||
|
|
||||||
|
axios.defaults.timeout = 5000 // 请求超时时间
|
||||||
|
axios.defaults.retry = 2 // 重新请求次数
|
||||||
|
axios.defaults.retryDelay = 1 // 重新请求等待时间
|
||||||
|
// axios.defaults.baseURL = process.env.VUE_APP_BASE_API
|
||||||
|
|
||||||
|
axios.defaults.headers.post['Content-Type'] =
|
||||||
|
'application/x-www-form-urlencoded;charset=UTF-8' // post请求头的设置
|
||||||
|
// axios 请求拦截器
|
||||||
|
axios.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
// 可在此设置要发送的token
|
||||||
|
// let token = store.getters['login/token'];
|
||||||
|
// token && (config.headers.token = token)
|
||||||
|
// Indicator.open('数据加载中')
|
||||||
|
|
||||||
|
config.retry = 2 // 重新请求次数
|
||||||
|
config.retryDelay = 200 // 重新请求等待时间
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.error(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
// axios respone拦截器
|
||||||
|
axios.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
if (response.config.url.indexOf('https://wx.xfhd.net/wxapi/api/jsconfig') < 0) {
|
||||||
|
console.log(response.config.url, '\n', response.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
|
||||||
|
// 否则的话抛出错误 结合自身业务和后台返回的接口状态约定写respone拦截器
|
||||||
|
// Indicator.close()
|
||||||
|
// if (response.status === 200 && response.data.code === 0 ) {
|
||||||
|
if (response.status == 200) {
|
||||||
|
return Promise.resolve(response)
|
||||||
|
} else {
|
||||||
|
// Toast({
|
||||||
|
// message: response.data.msg,
|
||||||
|
// position: 'middle',
|
||||||
|
// duration: 2000
|
||||||
|
// });
|
||||||
|
return Promise.reject(response)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function axiosRetryInterceptor(err) {
|
||||||
|
var config = err.config;
|
||||||
|
// console.log(config);
|
||||||
|
// If config does not exist or the retry option is not set, reject
|
||||||
|
if (!config || !config.retry) return Promise.reject(err);
|
||||||
|
|
||||||
|
// Set the variable for keeping track of the retry count
|
||||||
|
config.__retryCount = config.__retryCount || 0;
|
||||||
|
|
||||||
|
// Check if we've maxed out the total number of retries
|
||||||
|
if (config.__retryCount >= config.retry) {
|
||||||
|
// Reject with the error
|
||||||
|
return Promise.reject(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Increase the retry count
|
||||||
|
config.__retryCount += 1;
|
||||||
|
|
||||||
|
// Create new promise to handle exponential backoff
|
||||||
|
var backoff = new Promise(function (resolve) {
|
||||||
|
setTimeout(function () {
|
||||||
|
resolve();
|
||||||
|
}, config.retryDelay || 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Return the promise in which recalls axios to retry the request
|
||||||
|
return backoff.then(function () {
|
||||||
|
return axios(config);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
// error => {
|
||||||
|
// // Indicator.close()
|
||||||
|
// const responseCode = error.response.status
|
||||||
|
// switch (responseCode) {
|
||||||
|
// // 401：未登录
|
||||||
|
// case 401:
|
||||||
|
// break
|
||||||
|
// // 404请求不存在
|
||||||
|
// case 404:
|
||||||
|
// // Toast({
|
||||||
|
// // message: '网络请求不存在',
|
||||||
|
// // position: 'middle',
|
||||||
|
// // duration: 2000
|
||||||
|
// // });
|
||||||
|
// break
|
||||||
|
// default:
|
||||||
|
// // Toast({
|
||||||
|
// // message: error.response.data.message,
|
||||||
|
// // position: 'middle',
|
||||||
|
// // duration: 2000
|
||||||
|
// // });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return Promise.reject(error.response)
|
||||||
|
// }
|
||||||
|
)
|
||||||
|
/**
|
||||||
|
* 封装get方法，对应get请求
|
||||||
|
* @param {String} url [请求的url地址]
|
||||||
|
* @param {Object} params [请求时携带的参数]
|
||||||
|
*/
|
||||||
|
function get(url, params = {}) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
axios
|
||||||
|
.get(url, {
|
||||||
|
params: params
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
resolve(res.data)
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 或者return axios.get();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* post方法，对应post请求
|
||||||
|
* @param {String} url [请求的url地址]
|
||||||
|
* @param {Object} params [请求时携带的参数]
|
||||||
|
*/
|
||||||
|
function post(url, params) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
axios
|
||||||
|
.post(url, qs.stringify(params))
|
||||||
|
.then(res => {
|
||||||
|
resolve(res.data)
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 或者return axios.post();
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
get,
|
||||||
|
post
|
||||||
|
}
|
||||||
324
src/components/color/index.vue
Normal file
324
src/components/color/index.vue
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
<template>
|
||||||
|
<div class="c-shader" ref="container"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import gsap from "gsap";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import * as Stats from "stats.js";
|
||||||
|
|
||||||
|
import colorVertex from "@/assets/shader/color_vertex.glsl";
|
||||||
|
import colorFrag from "@/assets/shader/color_fragment.glsl";
|
||||||
|
import { GUI } from "three/examples/jsm/libs/dat.gui.module.js";
|
||||||
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
||||||
|
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
|
||||||
|
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
|
||||||
|
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
|
||||||
|
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "color",
|
||||||
|
props: {
|
||||||
|
msg: String,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
container: null,
|
||||||
|
camera: null,
|
||||||
|
scene: null,
|
||||||
|
renderer: null,
|
||||||
|
mouse: new THREE.Vector2(),
|
||||||
|
raycaster: new THREE.Raycaster(),
|
||||||
|
gui: new GUI(),
|
||||||
|
|
||||||
|
ENTIRE_SCENE: 0,
|
||||||
|
BLOOM_SCENE: 1,
|
||||||
|
materials: {},
|
||||||
|
params: {
|
||||||
|
exposure: 1,
|
||||||
|
bloomStrength: 5,
|
||||||
|
bloomThreshold: 0,
|
||||||
|
bloomRadius: 0,
|
||||||
|
scene: "Scene with Glow",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.initStage();
|
||||||
|
this.addAnimation();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initStage() {
|
||||||
|
//基础参数
|
||||||
|
this.container = this.$refs.container;
|
||||||
|
this.camera = new THREE.Camera();
|
||||||
|
this.camera.position.z = 1;
|
||||||
|
this.scene = new THREE.Scene();
|
||||||
|
|
||||||
|
this.bloomLayer = new THREE.Layers();
|
||||||
|
this.bloomLayer.set(this.BLOOM_SCENE);
|
||||||
|
|
||||||
|
this.darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
|
||||||
|
|
||||||
|
// 定义 webglrender
|
||||||
|
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||||
|
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
this.renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||||
|
this.container.appendChild(this.renderer.domElement);
|
||||||
|
|
||||||
|
// 定义相机
|
||||||
|
this.camera = new THREE.PerspectiveCamera(
|
||||||
|
40,
|
||||||
|
window.innerWidth / window.innerHeight,
|
||||||
|
1,
|
||||||
|
200
|
||||||
|
);
|
||||||
|
this.camera.position.set(0, 0, 20);
|
||||||
|
this.camera.lookAt(0, 0, 0);
|
||||||
|
|
||||||
|
// 定义操控
|
||||||
|
this.controls = new OrbitControls(
|
||||||
|
this.camera,
|
||||||
|
this.renderer.domElement
|
||||||
|
);
|
||||||
|
this.controls.maxPolarAngle = Math.PI * 0.5;
|
||||||
|
this.controls.minDistance = 1;
|
||||||
|
this.controls.maxDistance = 100;
|
||||||
|
this.controls.addEventListener("change", this.render);
|
||||||
|
|
||||||
|
// 添加全局环境光
|
||||||
|
this.scene.add(new THREE.AmbientLight(0x404040));
|
||||||
|
|
||||||
|
this.renderScene = new RenderPass(this.scene, this.camera);
|
||||||
|
|
||||||
|
this.bloomPass = new UnrealBloomPass(
|
||||||
|
new THREE.Vector2(window.innerWidth, window.innerHeight),
|
||||||
|
1.5,
|
||||||
|
0.4,
|
||||||
|
0.85
|
||||||
|
);
|
||||||
|
this.bloomPass.threshold = this.params.bloomThreshold;
|
||||||
|
this.bloomPass.strength = this.params.bloomStrength;
|
||||||
|
this.bloomPass.radius = this.params.bloomRadius;
|
||||||
|
|
||||||
|
this.bloomComposer = new EffectComposer(this.renderer);
|
||||||
|
this.bloomComposer.renderToScreen = false;
|
||||||
|
this.bloomComposer.addPass(this.renderScene);
|
||||||
|
this.bloomComposer.addPass(this.bloomPass);
|
||||||
|
|
||||||
|
this.finalPass = new ShaderPass(
|
||||||
|
new THREE.ShaderMaterial({
|
||||||
|
uniforms: {
|
||||||
|
baseTexture: { value: null },
|
||||||
|
bloomTexture: {
|
||||||
|
value: this.bloomComposer.renderTarget2.texture,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
vertexShader: colorVertex,
|
||||||
|
fragmentShader: colorFrag,
|
||||||
|
defines: {},
|
||||||
|
}),
|
||||||
|
"baseTexture"
|
||||||
|
);
|
||||||
|
this.finalPass.needsSwap = true;
|
||||||
|
|
||||||
|
this.finalComposer = new EffectComposer(this.renderer);
|
||||||
|
this.finalComposer.addPass(this.renderScene);
|
||||||
|
this.finalComposer.addPass(this.finalPass);
|
||||||
|
|
||||||
|
// 添加点击事件
|
||||||
|
window.addEventListener("pointerdown", this.onPointerDown);
|
||||||
|
|
||||||
|
this.gui
|
||||||
|
.add(this.params, "scene", [
|
||||||
|
"Scene with Glow",
|
||||||
|
"Glow only",
|
||||||
|
"Scene only",
|
||||||
|
])
|
||||||
|
.onChange((value) => {
|
||||||
|
switch (value) {
|
||||||
|
case "Scene with Glow":
|
||||||
|
this.bloomComposer.renderToScreen = false;
|
||||||
|
break;
|
||||||
|
case "Glow only":
|
||||||
|
this.bloomComposer.renderToScreen = true;
|
||||||
|
break;
|
||||||
|
case "Scene only":
|
||||||
|
// nothing to do
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.folder = this.gui.addFolder("Bloom Parameters");
|
||||||
|
|
||||||
|
this.folder
|
||||||
|
.add(this.params, "exposure", 0.1, 2)
|
||||||
|
.onChange((value) => {
|
||||||
|
this.renderer.toneMappingExposure = Math.pow(value, 4.0);
|
||||||
|
this.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.folder
|
||||||
|
.add(this.params, "bloomThreshold", 0.0, 1.0)
|
||||||
|
.onChange((value) => {
|
||||||
|
this.bloomPass.threshold = Number(value);
|
||||||
|
this.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.folder
|
||||||
|
.add(this.params, "bloomStrength", 0.0, 10.0)
|
||||||
|
.onChange((value) => {
|
||||||
|
this.bloomPass.strength = Number(value);
|
||||||
|
this.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.folder
|
||||||
|
.add(this.params, "bloomRadius", 0.0, 1.0)
|
||||||
|
.step(0.01)
|
||||||
|
.onChange((value) => {
|
||||||
|
this.bloomPass.radius = Number(value);
|
||||||
|
this.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置场景
|
||||||
|
this.setupScene();
|
||||||
|
},
|
||||||
|
onPointerDown(event) {
|
||||||
|
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||||
|
this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||||
|
|
||||||
|
this.raycaster.setFromCamera(this.mouse, this.camera);
|
||||||
|
this.intersects = this.raycaster.intersectObjects(
|
||||||
|
this.scene.children,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
if (this.intersects.length > 0) {
|
||||||
|
const object = this.intersects[0].object;
|
||||||
|
object.layers.toggle(this.BLOOM_SCENE);
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onWindowResize(event) {
|
||||||
|
const width = window.innerWidth;
|
||||||
|
const height = window.innerHeight;
|
||||||
|
|
||||||
|
this.camera.aspect = width / height;
|
||||||
|
this.camera.updateProjectionMatrix();
|
||||||
|
|
||||||
|
this.renderer.setSize(width, height);
|
||||||
|
|
||||||
|
this.bloomComposer.setSize(width, height);
|
||||||
|
this.finalComposer.setSize(width, height);
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
setupScene() {
|
||||||
|
this.scene.traverse(this.disposeMaterial);
|
||||||
|
this.scene.children.length = 0;
|
||||||
|
|
||||||
|
const geometry = new THREE.IcosahedronGeometry(1, 15);
|
||||||
|
|
||||||
|
for (let i = 0; i < 50; i++) {
|
||||||
|
const color = new THREE.Color();
|
||||||
|
color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
|
||||||
|
|
||||||
|
const material = new THREE.MeshBasicMaterial({ color: color });
|
||||||
|
const sphere = new THREE.Mesh(geometry, material);
|
||||||
|
sphere.position.x = Math.random() * 10 - 5;
|
||||||
|
sphere.position.y = Math.random() * 10 - 5;
|
||||||
|
sphere.position.z = Math.random() * 10 - 5;
|
||||||
|
sphere.position
|
||||||
|
.normalize()
|
||||||
|
.multiplyScalar(Math.random() * 4.0 + 2.0);
|
||||||
|
sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
|
||||||
|
this.scene.add(sphere);
|
||||||
|
|
||||||
|
if (Math.random() < 0.25)
|
||||||
|
sphere.layers.enable(this.BLOOM_SCENE);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
disposeMaterial(obj) {
|
||||||
|
if (obj.material) {
|
||||||
|
obj.material.dispose();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animate() {
|
||||||
|
// requestAnimationFrame(this.animate);
|
||||||
|
// this.render();
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
switch (this.params.scene) {
|
||||||
|
case "Scene only":
|
||||||
|
this.renderer.render(this.scene, this.camera);
|
||||||
|
break;
|
||||||
|
case "Glow only":
|
||||||
|
this.renderBloom(false);
|
||||||
|
break;
|
||||||
|
case "Scene with Glow":
|
||||||
|
default:
|
||||||
|
// render scene with bloom
|
||||||
|
this.renderBloom(true);
|
||||||
|
|
||||||
|
// render the entire scene, then render bloom scene on top
|
||||||
|
this.finalComposer.render();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// this.renderer.render(this.scene, this.camera);
|
||||||
|
},
|
||||||
|
renderBloom(mask) {
|
||||||
|
if (mask === true) {
|
||||||
|
this.scene.traverse(this.darkenNonBloomed);
|
||||||
|
this.bloomComposer.render();
|
||||||
|
this.scene.traverse(this.restoreMaterial);
|
||||||
|
} else {
|
||||||
|
this.camera.layers.set(this.BLOOM_SCENE);
|
||||||
|
this.bloomComposer.render();
|
||||||
|
this.camera.layers.set(this.ENTIRE_SCENE);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
darkenNonBloomed(obj) {
|
||||||
|
if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
|
||||||
|
this.materials[obj.uuid] = obj.material;
|
||||||
|
obj.material = this.darkMaterial;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
restoreMaterial(obj) {
|
||||||
|
if (this.materials[obj.uuid]) {
|
||||||
|
obj.material = this.materials[obj.uuid];
|
||||||
|
delete this.materials[obj.uuid];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addAnimation() {
|
||||||
|
gsap.to(this.params, {
|
||||||
|
exposure: 1.2,
|
||||||
|
duration: 2,
|
||||||
|
yoyo: true,
|
||||||
|
repeat: -1,
|
||||||
|
onUpdate: () => {
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="less">
|
||||||
|
.c-shader {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
.select-btn {
|
||||||
|
// background-color: #fff;
|
||||||
|
.paCenterBottom(2%,50%,auto,10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
196
src/components/shader/index.vue
Normal file
196
src/components/shader/index.vue
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
<template>
|
||||||
|
<div class="shader" ref="container">
|
||||||
|
<!-- <a
|
||||||
|
href="javascript:;"
|
||||||
|
class="weui-btn weui-btn_default select-btn"
|
||||||
|
@click="chooseScene"
|
||||||
|
>
|
||||||
|
切换效果
|
||||||
|
</a> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as THREE from "three";
|
||||||
|
import * as Stats from "stats.js";
|
||||||
|
import cloud_vertex from "@/assets/shader/cloud_vertex.glsl";
|
||||||
|
import cloud_frag from "@/assets/shader/cloud_frag.glsl";
|
||||||
|
import cloud2_frag from "@/assets/shader/cloud2_frag.glsl";
|
||||||
|
import aurora_frag from "@/assets/shader/aurora_frag.glsl";
|
||||||
|
import star_frag from "@/assets/shader/star_frag.glsl";
|
||||||
|
import rain_frag from "@/assets/shader/rain_frag.glsl";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "shader",
|
||||||
|
props: {
|
||||||
|
msg: String,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nowSceneGlsl: 0,
|
||||||
|
container: null,
|
||||||
|
camera: null,
|
||||||
|
scene: null,
|
||||||
|
renderer: null,
|
||||||
|
imouse: new THREE.Vector2(),
|
||||||
|
uniforms: {
|
||||||
|
resolution: {
|
||||||
|
value: new THREE.Vector2(
|
||||||
|
window.innerWidth,
|
||||||
|
window.innerHeight
|
||||||
|
),
|
||||||
|
},
|
||||||
|
iDate: {
|
||||||
|
type: "v4",
|
||||||
|
value:
|
||||||
|
// new THREE.Vector4(2021, 3, 3, 17),
|
||||||
|
new THREE.Vector4(
|
||||||
|
new Date().getFullYear(),
|
||||||
|
new Date().getMonth(),
|
||||||
|
new Date().getDate(),
|
||||||
|
new Date().getHours()
|
||||||
|
),
|
||||||
|
},
|
||||||
|
iTime: {
|
||||||
|
type: "f",
|
||||||
|
value: 1.0,
|
||||||
|
},
|
||||||
|
iResolution: {
|
||||||
|
type: "v2",
|
||||||
|
value: new THREE.Vector2(),
|
||||||
|
},
|
||||||
|
iMouse: {
|
||||||
|
type: "v2",
|
||||||
|
value: new THREE.Vector2(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
glsls: [cloud_frag, cloud2_frag, aurora_frag, star_frag, rain_frag],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.initStage();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
chooseScene() {
|
||||||
|
// 单列picker
|
||||||
|
this.$weui.picker(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: "云",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "云2",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "极光",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "星星",
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "雨",
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
{
|
||||||
|
defaultValue: [0],
|
||||||
|
onChange: (result) => {
|
||||||
|
if (this.nowSceneGlsl == result[0].value) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
console.log(result[0]);
|
||||||
|
this.updateMaterial(result[0].value);
|
||||||
|
this.nowSceneGlsl = result[0].value;
|
||||||
|
},
|
||||||
|
onConfirm: function (result) {
|
||||||
|
// console.log(result);
|
||||||
|
},
|
||||||
|
id: "scenePicker",
|
||||||
|
title: "场景选择",
|
||||||
|
desc: "请选择一个场景",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initStage() {
|
||||||
|
//基础参数
|
||||||
|
this.container = this.$refs.container;
|
||||||
|
this.camera = new THREE.Camera();
|
||||||
|
this.camera.position.z = 1;
|
||||||
|
this.scene = new THREE.Scene();
|
||||||
|
|
||||||
|
// 创建 mesh
|
||||||
|
var material = new THREE.ShaderMaterial({
|
||||||
|
uniforms: this.uniforms,
|
||||||
|
vertexShader: cloud_vertex,
|
||||||
|
fragmentShader: this.glsls[4], //star_frag, //aurora_frag, //cloud_frag,
|
||||||
|
});
|
||||||
|
var geometry = new THREE.PlaneBufferGeometry(2, 2);
|
||||||
|
this.mesh = new THREE.Mesh(geometry, material);
|
||||||
|
this.scene.add(this.mesh);
|
||||||
|
|
||||||
|
// 设置 render
|
||||||
|
this.renderer = new THREE.WebGLRenderer();
|
||||||
|
this.renderer.setPixelRatio(
|
||||||
|
window.deviceInfo.device == "PC" ? 1 : 1
|
||||||
|
);
|
||||||
|
this.container.appendChild(this.renderer.domElement);
|
||||||
|
// 设置 stats
|
||||||
|
// this.stats = new Stats();
|
||||||
|
// this.container.appendChild(this.stats.domElement);
|
||||||
|
|
||||||
|
this.animate();
|
||||||
|
|
||||||
|
this.onWindowResize();
|
||||||
|
window.addEventListener("resize", this.onWindowResize, false);
|
||||||
|
|
||||||
|
// 鼠标兼容shadertoy imouse
|
||||||
|
this.container.addEventListener("touchmove", (evt) => {
|
||||||
|
console.log(evt);
|
||||||
|
this.uniforms.iMouse.x = evt["touches"][0].clientX;
|
||||||
|
this.uniforms.iMouse.y = evt["touches"][0].clientY;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onWindowResize(event) {
|
||||||
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
this.uniforms.iResolution.value.x = this.renderer.domElement.width;
|
||||||
|
this.uniforms.iResolution.value.y = this.renderer.domElement.height;
|
||||||
|
},
|
||||||
|
updateMaterial(glslIndex) {
|
||||||
|
this.mesh.material = new THREE.ShaderMaterial({
|
||||||
|
uniforms: this.uniforms,
|
||||||
|
vertexShader: cloud_vertex,
|
||||||
|
fragmentShader: this.glsls[glslIndex], //star_frag, //aurora_frag, //cloud_frag,
|
||||||
|
});
|
||||||
|
// this.mesh.update();
|
||||||
|
},
|
||||||
|
animate() {
|
||||||
|
requestAnimationFrame(this.animate);
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
// this.stats.update();
|
||||||
|
this.uniforms.iTime.value += 0.02;
|
||||||
|
this.renderer.render(this.scene, this.camera);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="less">
|
||||||
|
.shader {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
.select-btn {
|
||||||
|
// background-color: #fff;
|
||||||
|
.paCenterBottom(2%,50%,auto,10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
194
src/components/shader/vue2-countdown.vue
Normal file
194
src/components/shader/vue2-countdown.vue
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p v-if="msTime.show">
|
||||||
|
<!--<span v-if="tipShow">{{tipText}}:</span>-->
|
||||||
|
<!--<span v-if="!tipShow">{{tipTextEnd}}:</span>-->
|
||||||
|
<span v-if="msTime.day>0"><span>{{msTime.day}}</span><i>{{dayTxt}}</i></span>
|
||||||
|
<span>{{msTime.hour}}</span><i>{{hourTxt}}</i>
|
||||||
|
<span>{{msTime.minutes}}</span><i>{{minutesTxt}}</i>
|
||||||
|
<span>{{msTime.seconds}}</span><i>{{secondsTxt}}</i>
|
||||||
|
</p>
|
||||||
|
<!--<p v-if="!msTime.show">{{endText}}</p>-->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
replace: true,
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
tipShow: true,
|
||||||
|
msTime: { //倒计时数值
|
||||||
|
show: false, //倒计时状态
|
||||||
|
day: '', //天
|
||||||
|
hour: '', //小时
|
||||||
|
minutes: '', //分钟
|
||||||
|
seconds: '' //秒
|
||||||
|
},
|
||||||
|
star: '', //活动开始时间
|
||||||
|
end: '', //活动结束时间
|
||||||
|
current: '', //当前时间
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentTime: function (val, oldval) {
|
||||||
|
this.gogogo();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
//距离开始提示文字
|
||||||
|
tipText: {
|
||||||
|
type: String,
|
||||||
|
default: '距离开始'
|
||||||
|
},
|
||||||
|
//距离结束提示文字
|
||||||
|
tipTextEnd: {
|
||||||
|
type: String,
|
||||||
|
default: '距离结束'
|
||||||
|
},
|
||||||
|
//时间控件ID
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: '1'
|
||||||
|
},
|
||||||
|
//当前时间
|
||||||
|
currentTime: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
// 活动开始时间
|
||||||
|
startTime: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
// 活动结束时间
|
||||||
|
endTime: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
// 倒计时结束显示文本
|
||||||
|
endText: {
|
||||||
|
type: String,
|
||||||
|
default: '已结束'
|
||||||
|
},
|
||||||
|
//自定义显示文字:天
|
||||||
|
dayTxt: {
|
||||||
|
type: String,
|
||||||
|
default: ':'
|
||||||
|
},
|
||||||
|
//自定义显示文字:时
|
||||||
|
hourTxt: {
|
||||||
|
type: String,
|
||||||
|
default: ':'
|
||||||
|
},
|
||||||
|
//自定义显示文字:分
|
||||||
|
minutesTxt: {
|
||||||
|
type: String,
|
||||||
|
default: ':'
|
||||||
|
},
|
||||||
|
secondsTxt: {
|
||||||
|
type: String,
|
||||||
|
default: ':'
|
||||||
|
},
|
||||||
|
//是否开启秒表倒计，未完成
|
||||||
|
secondsFixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.gogogo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
gogogo: function () {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
//判断是秒还是毫秒
|
||||||
|
this.startTime.toString().length == 10 ? this.star = this.startTime * 1000 : this.star = this.startTime;
|
||||||
|
this.endTime.toString().length == 10 ? this.end = this.endTime * 1000 : this.end = this.endTime;
|
||||||
|
if (this.currentTime) {
|
||||||
|
this.currentTime.toString().length == 10 ? this.current = this.currentTime * 1000 : this.current = this.currentTime;
|
||||||
|
} else {
|
||||||
|
this.current = ( new Date() ).getTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.end < this.current) {
|
||||||
|
/**
|
||||||
|
* 结束时间小于当前时间 活动已结束
|
||||||
|
*/
|
||||||
|
this.msTime.show = false;
|
||||||
|
this.end_message();
|
||||||
|
}
|
||||||
|
else if (this.current < this.star) {
|
||||||
|
/**
|
||||||
|
* 当前时间小于开始时间 活动尚未开始
|
||||||
|
*/
|
||||||
|
this.$set(this, 'tipShow', true);
|
||||||
|
setTimeout(() => {
|
||||||
|
this.runTime(this.star, this.current, this.start_message);
|
||||||
|
}, 1);
|
||||||
|
}
|
||||||
|
else if (this.end > this.current && this.star < this.current || this.star == this.current) {
|
||||||
|
/**
|
||||||
|
* 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时
|
||||||
|
*/
|
||||||
|
this.$set(this, 'tipShow', false);
|
||||||
|
this.msTime.show = true;
|
||||||
|
this.$emit('start_callback', this.msTime.show);
|
||||||
|
setTimeout(() => {
|
||||||
|
this.runTime(this.end, this.star, this.end_message, true)
|
||||||
|
}, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
runTime (startTime, endTime, callFun, type) {
|
||||||
|
let msTime = this.msTime;
|
||||||
|
let timeDistance = startTime - endTime;
|
||||||
|
if (timeDistance > 0) {
|
||||||
|
this.msTime.show = true;
|
||||||
|
msTime.day = Math.floor(timeDistance / 86400000);
|
||||||
|
timeDistance -= msTime.day * 86400000;
|
||||||
|
msTime.hour = Math.floor(timeDistance / 3600000);
|
||||||
|
timeDistance -= msTime.hour * 3600000;
|
||||||
|
msTime.minutes = Math.floor(timeDistance / 60000);
|
||||||
|
timeDistance -= msTime.minutes * 60000;
|
||||||
|
//是否开启秒表倒计,未完成
|
||||||
|
// this.secondsFixed ? msTime.seconds = new Number(timeDistance / 1000).toFixed(2) : msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);
|
||||||
|
msTime.seconds = Math.floor(timeDistance / 1000).toFixed(0);
|
||||||
|
timeDistance -= msTime.seconds * 1000;
|
||||||
|
|
||||||
|
if (msTime.hour < 10) {
|
||||||
|
msTime.hour = "0" + msTime.hour;
|
||||||
|
}
|
||||||
|
if (msTime.minutes < 10) {
|
||||||
|
msTime.minutes = "0" + msTime.minutes;
|
||||||
|
}
|
||||||
|
if (msTime.seconds < 10) {
|
||||||
|
msTime.seconds = "0" + msTime.seconds;
|
||||||
|
}
|
||||||
|
let _s = Date.now();
|
||||||
|
let _e = Date.now();
|
||||||
|
let diffPerFunc = _e - _s;
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
if (type) {
|
||||||
|
this.runTime(this.end, endTime += 1000, callFun, true);
|
||||||
|
} else {
|
||||||
|
this.runTime(this.star, endTime += 1000, callFun);
|
||||||
|
}
|
||||||
|
}, 1000 - diffPerFunc)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
callFun();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
start_message () {
|
||||||
|
this.$set(this, 'tipShow', false);
|
||||||
|
this.$emit('start_callback', this.msTime.show);
|
||||||
|
setTimeout(() => {
|
||||||
|
this.runTime(this.end, this.star, this.end_message, true)
|
||||||
|
}, 1);
|
||||||
|
},
|
||||||
|
end_message(){
|
||||||
|
this.msTime.show = false;
|
||||||
|
if (this.currentTime <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit('end_callback', this.msTime.show);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
13
src/page/index/App.vue
Normal file
13
src/page/index/App.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<!-- 需要缓存的 -->
|
||||||
|
<keep-alive>
|
||||||
|
<router-view v-if="$route.meta.keepAlive" />
|
||||||
|
</keep-alive>
|
||||||
|
<!-- 不需要缓存的 -->
|
||||||
|
<router-view v-if="!$route.meta.keepAlive" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
40
src/page/index/Color/index.vue
Normal file
40
src/page/index/Color/index.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2020-08-28 15:20:15
|
||||||
|
* @LastEditTime: 2020-10-10 17:19:06
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="color">
|
||||||
|
<Color></Color>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import Color from "@/components/color/index.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Index",
|
||||||
|
components: { Color },
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
showTips() {
|
||||||
|
this.$weui.topTips("正在努力开发中……敬请期待", {
|
||||||
|
duration: 1500,
|
||||||
|
className: "custom-classname",
|
||||||
|
callback: function () {
|
||||||
|
// console.log('close');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="less">
|
||||||
|
.color {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
168
src/page/index/Home/index.vue
Normal file
168
src/page/index/Home/index.vue
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2020-08-28 15:20:15
|
||||||
|
* @LastEditTime: 2020-10-10 17:19:06
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<Shader></Shader>
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<div class="page grid js_show dialog">
|
||||||
|
<div class="page__hd">
|
||||||
|
<h1 class="page__title" style="font-size: 20px">
|
||||||
|
大板栗的玩具屋
|
||||||
|
</h1>
|
||||||
|
<p class="page__desc" style="font-size: 18px">玩具列表</p>
|
||||||
|
<p class="page__desc">have fun！</p>
|
||||||
|
</div>
|
||||||
|
<div class="weui-grids" style="margin-top: 100px">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
style="opacity: 0.5"
|
||||||
|
@click="jump(1)"
|
||||||
|
class="weui-grid"
|
||||||
|
>
|
||||||
|
<div class="weui-grid__icon">
|
||||||
|
<span class="iconfont"></span>
|
||||||
|
</div>
|
||||||
|
<p class="weui-grid__label">鉴色</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
style="opacity: 0.5"
|
||||||
|
@click="showTips"
|
||||||
|
class="weui-grid"
|
||||||
|
>
|
||||||
|
<div class="weui-grid__icon">
|
||||||
|
<span class="iconfont"></span>
|
||||||
|
</div>
|
||||||
|
<p class="weui-grid__label">预留</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
style="opacity: 0.5"
|
||||||
|
@click="showTips"
|
||||||
|
class="weui-grid"
|
||||||
|
>
|
||||||
|
<div class="weui-grid__icon">
|
||||||
|
<span class="iconfont"></span>
|
||||||
|
</div>
|
||||||
|
<p class="weui-grid__label">预留</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="weui-grid"
|
||||||
|
style="opacity: 0.5"
|
||||||
|
@click="showTips"
|
||||||
|
>
|
||||||
|
<div class="weui-grid__icon">
|
||||||
|
<span class="iconfont"></span>
|
||||||
|
</div>
|
||||||
|
<p class="weui-grid__label">...</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="weui-grid"
|
||||||
|
style="opacity: 0.5"
|
||||||
|
@click="showTips"
|
||||||
|
>
|
||||||
|
<div class="weui-grid__icon">
|
||||||
|
<span class="iconfont"></span>
|
||||||
|
</div>
|
||||||
|
<p class="weui-grid__label">预留</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="weui-grid"
|
||||||
|
style="opacity: 0.5"
|
||||||
|
@click="showTips"
|
||||||
|
>
|
||||||
|
<div class="weui-grid__icon">
|
||||||
|
<span class="iconfont"></span>
|
||||||
|
</div>
|
||||||
|
<p class="weui-grid__label">...</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import Shader from "@/components/shader/index.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Index",
|
||||||
|
components: {
|
||||||
|
Shader,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.$weui.toast('即将跳转至项目列表页', {
|
||||||
|
// duration: 3500,
|
||||||
|
// className: "toast-warn",
|
||||||
|
// });
|
||||||
|
// setTimeout(() => {
|
||||||
|
// location.href = './project-list.html'
|
||||||
|
// }, 3500);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转
|
||||||
|
jump(id) {
|
||||||
|
// 第一个游戏
|
||||||
|
if (id == 1) {
|
||||||
|
this.$router.push({
|
||||||
|
path: "/color",
|
||||||
|
query: {},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showTips() {
|
||||||
|
this.$weui.topTips("正在努力开发中……敬请期待", {
|
||||||
|
duration: 1500,
|
||||||
|
className: "custom-classname",
|
||||||
|
callback: function () {
|
||||||
|
// console.log('close');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="less">
|
||||||
|
.home {
|
||||||
|
min-height: 100vh;
|
||||||
|
.overlay {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
.paLayout(0,0,100%,100%,101);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.dialog {
|
||||||
|
.paLayout(0,0,100%,50%,102);
|
||||||
|
color: #fff;
|
||||||
|
.weui-grids::before,
|
||||||
|
.weui-grids::after,
|
||||||
|
.weui-grid:before,
|
||||||
|
.weui-grid:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.weui-grid__label {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.weui-grid__icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.iconfont {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page__hd {
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
129
src/page/index/main.js
Normal file
129
src/page/index/main.js
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2020-09-10 18:52:15
|
||||||
|
* @LastEditTime: 2020-10-14 15:28:42
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /xfhd-vue-scaffold/src/page/index/main.js
|
||||||
|
*/
|
||||||
|
import "core-js/stable";
|
||||||
|
import "regenerator-runtime/runtime";
|
||||||
|
import 'lib-flexible/flexible'
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from '@/store'
|
||||||
|
import utils from '@/utils/index.js'
|
||||||
|
import {
|
||||||
|
gsap,
|
||||||
|
TimelineMax
|
||||||
|
} from 'gsap'
|
||||||
|
import '@/assets/css/reset.less'
|
||||||
|
// import imgList from '@/preload/imgList.js' // 预加载资源图
|
||||||
|
import weui from 'weui'
|
||||||
|
import '@/assets/css/weui-2.0.1.css';
|
||||||
|
import '@/assets/css/weui-for-work.css'
|
||||||
|
// import VueLazyload from 'vue-lazyload' lazyload 懒加载
|
||||||
|
|
||||||
|
// fix swiper6 with vue-awesome-swiper bug
|
||||||
|
// import {
|
||||||
|
// Swiper as SwiperClass,
|
||||||
|
// Pagination,
|
||||||
|
// Mousewheel,
|
||||||
|
// Autoplay,
|
||||||
|
// } from "swiper/swiper.esm";
|
||||||
|
// import getAwesomeSwiper from "vue-awesome-swiper/dist/exporter";
|
||||||
|
|
||||||
|
|
||||||
|
// 阻止启动生产消息，常用作指令。
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
// 挂载工具集
|
||||||
|
Vue.prototype.$Utils = utils;
|
||||||
|
// 引入 weui
|
||||||
|
Vue.prototype.$weui = weui
|
||||||
|
|
||||||
|
// init xgl plugins
|
||||||
|
utils.initial({
|
||||||
|
debug: false,
|
||||||
|
targetEnv: "",
|
||||||
|
formalURL: "",
|
||||||
|
wxJsConfigUrl: "https://wx.xfhd.net/wxapi/api/jsconfig?appid=wx41d80a1bb01f658d",
|
||||||
|
ajaxUrl: process.env.VUE_APP_BASE_URL + "jgj-day-get-money/api/",
|
||||||
|
demoConfig: {
|
||||||
|
visible: false, //process.env.NODE_ENV === 'development',
|
||||||
|
},
|
||||||
|
wxShareConfig: {
|
||||||
|
// title: "", //分享标题
|
||||||
|
// desc: "", //分享描述
|
||||||
|
// url: "", //分享url
|
||||||
|
// imgUrl: "", //分享图片url
|
||||||
|
wxReady: function () { },
|
||||||
|
},
|
||||||
|
envHandle: {
|
||||||
|
wx: () => { },
|
||||||
|
jgj: () => { },
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**************************/
|
||||||
|
/****** swiper 初始化 ******/
|
||||||
|
/**************************/
|
||||||
|
// SwiperClass.use([Pagination, Mousewheel, Autoplay]);
|
||||||
|
// Vue.use(getAwesomeSwiper(SwiperClass));
|
||||||
|
|
||||||
|
/*******************************/
|
||||||
|
/**vue 懒加载 自定参数选项配置**/
|
||||||
|
/*******************************/
|
||||||
|
// vue 懒加载自定义参数选项配置
|
||||||
|
// Vue.use(VueLazyload, {
|
||||||
|
// preLoad: 1.3, // 提前加载高度（数字 1 表示 1 屏的高度） 默认值:1.3
|
||||||
|
// error: '/public/other/error.png', // 当加载图片失败的时候
|
||||||
|
// loading: '/public/other/loading.gif', // 图片加载状态下显示的图片
|
||||||
|
// attempt: 1 // 加载错误后最大尝试次数 默认值:1
|
||||||
|
// })
|
||||||
|
// <!-- 使用方法1: 可能图片url是直接从后台拿到的，把':src'替换成'v-lazy'就行 -->
|
||||||
|
// <template>
|
||||||
|
// <ul>
|
||||||
|
// <li v-for="img in list">
|
||||||
|
// <img v-lazy="img.src" >
|
||||||
|
// </li>
|
||||||
|
// </ul>
|
||||||
|
// </template>
|
||||||
|
|
||||||
|
// <!-- 使用方法2: 使用懒加载容器v-lazy-container,和v-lazy差不多,通过自定义指令去定义的，不过v-lazy-container扫描的是内部的子元素 -->
|
||||||
|
// <template>
|
||||||
|
// <div v-lazy-container="{ selector: 'img'}">
|
||||||
|
// <img data-src="//domain.com/img1.jpg">
|
||||||
|
// <img data-src="//domain.com/img2.jpg">
|
||||||
|
// <img data-src="//domain.com/img3.jpg">
|
||||||
|
// </div>
|
||||||
|
// </template>
|
||||||
|
|
||||||
|
// <!--自定义error和loading占位符图像-->
|
||||||
|
// <template>
|
||||||
|
// <div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
|
||||||
|
// <img data-src="//domain.com/img1.jpg">
|
||||||
|
// <img data-src="//domain.com/img2.jpg">
|
||||||
|
// <img data-src="//domain.com/img3.jpg">
|
||||||
|
// </div>
|
||||||
|
// </template>
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
|
// Vue.use(VueAwesomeSwiper /* { default global options } */);
|
||||||
|
|
||||||
|
|
||||||
|
/********************************/
|
||||||
|
/****** preloader资源预加载 ******/
|
||||||
|
/********************************/
|
||||||
|
gsap.to("#loadingContainer", {
|
||||||
|
autoAlpha: 0,
|
||||||
|
duration: 0.65,
|
||||||
|
delay: 3.2,
|
||||||
|
onComplete: () => {
|
||||||
|
document.getElementById('loadingContainer').remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
79
src/page/index/router/index.js
Normal file
79
src/page/index/router/index.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2020-09-10 18:52:15
|
||||||
|
* @LastEditTime: 2020-10-09 15:43:46
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /getCoinsEveryday/src/router/index.js
|
||||||
|
*/
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import Home from '../Home/index.vue'
|
||||||
|
import Color from '../Color/index.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
name: "Home",
|
||||||
|
component: Home,
|
||||||
|
meta: {
|
||||||
|
title: "大板栗的玩具屋", // 标题
|
||||||
|
keepAlive: true, // 是否保持活跃
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/home",
|
||||||
|
name: "Home2",
|
||||||
|
component: Home,
|
||||||
|
meta: {
|
||||||
|
title: "大板栗的玩具屋", // 标题
|
||||||
|
keepAlive: true, // 是否保持活跃
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/color",
|
||||||
|
name: "Color",
|
||||||
|
component: Color,
|
||||||
|
meta: {
|
||||||
|
title: "鉴色", // 标题
|
||||||
|
keepAlive: true, // 是否保持活跃
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// path: "/example",
|
||||||
|
// name: "example",
|
||||||
|
// // route level code-splitting
|
||||||
|
// // this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// // which is lazy-loaded when the route is visited.
|
||||||
|
// component: () => import("../views/example.vue"),
|
||||||
|
// children: [
|
||||||
|
// // {
|
||||||
|
// // path: '/',
|
||||||
|
// // name: 'com1',
|
||||||
|
// // component: () =>
|
||||||
|
// // import(/* webpackChunkName: "com1" */ './components/com1.vue'),//像这样的 前面的注释内容是有用的，可以指定chunk的名字
|
||||||
|
// // },
|
||||||
|
// ],
|
||||||
|
// meta: {
|
||||||
|
// keepAlive: false,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'hash',
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
// before守卫
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
/* 路由发生变化修改页面title */
|
||||||
|
if (to.meta.title) {
|
||||||
|
document.title = to.meta.title
|
||||||
|
}
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
4
src/router/index.js
Normal file
4
src/router/index.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Router from 'vue-router'
|
||||||
|
|
||||||
|
Vue.use(Router)
|
||||||
18
src/store/index.js
Normal file
18
src/store/index.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
modules: {},
|
||||||
|
state: {
|
||||||
|
direction: 'noAni'
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
updateDirection(state, direction) {
|
||||||
|
state.direction = direction
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {},
|
||||||
|
|
||||||
|
})
|
||||||
247
src/style/_mixin.scss
Normal file
247
src/style/_mixin.scss
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
@mixin center($width: null, $height: null) {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
|
||||||
|
@if not $width and not $height {
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $width and $height {
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
margin: -($height / 2) #{0 0} -($width / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if not $height {
|
||||||
|
width: $width;
|
||||||
|
margin-left: -($width / 2);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
height: $height;
|
||||||
|
margin-top: -($height / 2);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin hz-center($width: null, $height: null) {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
|
||||||
|
@if not $width and not $height {
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $width and $height {
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
margin-left: -($width / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if not $height {
|
||||||
|
width: $width;
|
||||||
|
margin-left: -($width / 2);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
height: $height;
|
||||||
|
margin-top: -($height / 2);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin pst($top: null, $left: null, $width: null, $height: null) {
|
||||||
|
position: absolute;
|
||||||
|
top: $top;
|
||||||
|
left: $left;
|
||||||
|
|
||||||
|
@if $width and $height {
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@mixin opacity($opacity) {
|
||||||
|
opacity: $opacity;
|
||||||
|
$opacity-ie: $opacity * 100;
|
||||||
|
filter: alpha(opacity=$opacity-ie);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin ell() {
|
||||||
|
//
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-text-overflow: ellipsis;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
//多行超出省略号
|
||||||
|
@mixin ell2() {
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
//.arrow{
|
||||||
|
// @include arrow(bottom,10px,#F00);
|
||||||
|
//
|
||||||
|
@mixin arrow($direction, $size, $color) {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
font-size: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-width: $size;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $direction==top {
|
||||||
|
border-style: dashed dashed solid dashed;
|
||||||
|
border-color: transparent transparent $color transparent;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $direction==bottom {
|
||||||
|
border-style: solid dashed dashed dashed;
|
||||||
|
border-color: $color transparent transparent transparent;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $direction==right {
|
||||||
|
border-style: dashed dashed dashed solid;
|
||||||
|
border-color: transparent transparent transparent $color;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $direction==left {
|
||||||
|
border-style: dashed solid dashed dashed;
|
||||||
|
border-color: transparent $color transparent transparent;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// clearfix
|
||||||
|
@mixin clr {
|
||||||
|
&:after {
|
||||||
|
clear: both;
|
||||||
|
content: '.';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
*height: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*渐变(从上到下）*/
|
||||||
|
@mixin linear-gradient($direction:bottom, $color1:transparent, $color2:#306eff, $color3:transparent) {
|
||||||
|
//background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
|
||||||
|
background: -o-linear-gradient($direction, $color1, $color2, $color3);
|
||||||
|
/* Opera 11.1 - 12.0 */
|
||||||
|
background: -moz-linear-gradient($direction, $color1, $color2, $color3);
|
||||||
|
/* Firefox 3.6 - 15 */
|
||||||
|
background: linear-gradient(to $direction, $color1, $color2, $color3);
|
||||||
|
/* 标准的语法 */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 行高 */
|
||||||
|
@mixin line-height($height:30px, $line-height:30px) {
|
||||||
|
@if ($height !=null) {
|
||||||
|
height: $height;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ($line-height !=null) {
|
||||||
|
line-height: $line-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 定义滚动条样式 圆角和阴影不需要则传入null */
|
||||||
|
@mixin scrollBar($width:10px, $height:10px, $outColor:$bgColor, $innerColor:$bgGrey, $radius:5px, $shadow:null) {
|
||||||
|
|
||||||
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
background-color: $outColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*定义滚动条轨道 内阴影+圆角*/
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
@if ($shadow !=null) {
|
||||||
|
-webkit-box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ($radius !=null) {
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $outColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*定义滑块 内阴影+圆角*/
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
@if ($shadow !=null) {
|
||||||
|
-webkit-box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ($radius !=null) {
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $innerColor;
|
||||||
|
border: 1px solid $innerColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* css3动画 默认3s宽度到200px */
|
||||||
|
@mixin animation($from:(width:0px), $to:(width:200px), $name:mymove, $animate:mymove 2s 1 linear infinite) {
|
||||||
|
-webkit-animation: $animate;
|
||||||
|
-o-animation: $animate;
|
||||||
|
animation: $animate;
|
||||||
|
|
||||||
|
@keyframes #{$name} {
|
||||||
|
from {
|
||||||
|
|
||||||
|
@each $key,
|
||||||
|
$value in $from {
|
||||||
|
#{$key}: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
|
||||||
|
@each $key,
|
||||||
|
$value in $to {
|
||||||
|
#{$key}: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes #{$name} {
|
||||||
|
from {
|
||||||
|
|
||||||
|
@each $key,
|
||||||
|
$value in $from {
|
||||||
|
$key: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
|
||||||
|
@each $key,
|
||||||
|
$value in $to {
|
||||||
|
$key: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/style/_variables.scss
Normal file
1
src/style/_variables.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
$color-main:red;
|
||||||
357
src/style/common.scss
Normal file
357
src/style/common.scss
Normal file
@ -0,0 +1,357 @@
|
|||||||
|
html {
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-focus: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 320px) {
|
||||||
|
html {
|
||||||
|
font-size: 42.667PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 321px) and (max-width:360px) {
|
||||||
|
html {
|
||||||
|
font-size: 48PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 361px) and (max-width:375px) {
|
||||||
|
html {
|
||||||
|
font-size: 50PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 376px) and (max-width:393px) {
|
||||||
|
html {
|
||||||
|
font-size: 52.4PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 394px) and (max-width:412px) {
|
||||||
|
html {
|
||||||
|
font-size: 54.93PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 413px) and (max-width:414px) {
|
||||||
|
html {
|
||||||
|
font-size: 55.2PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 415px) and (max-width:480px) {
|
||||||
|
html {
|
||||||
|
font-size: 64PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 481px) and (max-width:540px) {
|
||||||
|
html {
|
||||||
|
font-size: 72PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 541px) and (max-width:640px) {
|
||||||
|
html {
|
||||||
|
font-size: 85.33PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width:720px) {
|
||||||
|
html {
|
||||||
|
font-size: 96PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 721px) and (max-width:768px) {
|
||||||
|
html {
|
||||||
|
font-size: 102.4PX;
|
||||||
|
font-size: 13.33333vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 769px) {
|
||||||
|
html {
|
||||||
|
font-size: 102.4PX;
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 768PX;
|
||||||
|
margin: 0 auto
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
content: "";
|
||||||
|
visibility: hidden;
|
||||||
|
height: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
a {
|
||||||
|
border: none;
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
/* page change */
|
||||||
|
$--transition-time: 350ms;
|
||||||
|
|
||||||
|
.back-enter-active,
|
||||||
|
.back-leave-active,
|
||||||
|
.forward-enter-active,
|
||||||
|
.forward-leave-active {
|
||||||
|
will-change: transform;
|
||||||
|
transition: all $--transition-time;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
perspective: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-enter {
|
||||||
|
opacity: 0.75;
|
||||||
|
transform: translate3d(-35%, 0, 0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-enter-active {
|
||||||
|
z-index: -1 !important;
|
||||||
|
transition: all $--transition-time linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-leave-active {
|
||||||
|
transform: translate3d(100%, 0, 0) !important;
|
||||||
|
transition: all $--transition-time linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forward-enter {
|
||||||
|
transform: translate3d(100%, 0, 0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forward-enter-active {
|
||||||
|
transition: all $--transition-time linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forward-leave-active {
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0.65;
|
||||||
|
transform: translate3d(-35%, 0, 0) !important;
|
||||||
|
transition: all $--transition-time linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left-leave-active,
|
||||||
|
.slide-right-leave-active,
|
||||||
|
.slide-left-enter-active,
|
||||||
|
.slide-right-enter-active {
|
||||||
|
// transition: all 3S;
|
||||||
|
transition: all $--transition-time;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-right-enter {
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-right-leave-active {
|
||||||
|
transform: translate(100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left-enter {
|
||||||
|
transform: translate(100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left-leave-active {
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
|
||||||
|
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||||
|
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||||
|
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
||||||
|
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||||
|
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||||
|
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
|
||||||
|
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
|
||||||
|
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
||||||
|
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
|
||||||
|
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
||||||
|
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
|
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||||
|
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
||||||
|
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.fade-enter-active {
|
||||||
|
transition: all 0.5s $easeOutCirc;
|
||||||
|
|
||||||
|
.catalogue {
|
||||||
|
transition: all 0.35s $easeOutCubic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: all 0.35s $easeInOutQuart;
|
||||||
|
|
||||||
|
.catalogue {
|
||||||
|
transition: all 0.35s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
.catalogue {
|
||||||
|
transform: scale(0.2);
|
||||||
|
|
||||||
|
// .closeBtn {
|
||||||
|
// transform: scale(0.2);
|
||||||
|
// }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
html .bscroll-vertical-scrollbar {
|
||||||
|
background-color: rgb(239, 171, 63);
|
||||||
|
width: 7px !important;
|
||||||
|
bottom: 30px !important;
|
||||||
|
top: 40px !important;
|
||||||
|
right: 13px !important;
|
||||||
|
// overflow-x: visible;
|
||||||
|
|
||||||
|
// .bscroll-indicator {
|
||||||
|
// box-sizing: border-box;
|
||||||
|
// position: absolute;
|
||||||
|
// border: none !important;
|
||||||
|
|
||||||
|
// border-radius: 50% !important;
|
||||||
|
// background-color: # !important;
|
||||||
|
// width: 16px !important;
|
||||||
|
// height: 16px !important;
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.miniScreen {
|
||||||
|
|
||||||
|
// transform: translateY(60px);
|
||||||
|
.catalogue {
|
||||||
|
transform-origin: 50% 50% !important;
|
||||||
|
transform: scale(0.97);
|
||||||
|
|
||||||
|
// .closeBtn {
|
||||||
|
// transform: scale(0.2);
|
||||||
|
// }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalogue2 {
|
||||||
|
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sharePop .catalogue {
|
||||||
|
|
||||||
|
transform: scale(0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
.winCon {
|
||||||
|
|
||||||
|
transform: scale(0.77) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.failCon {
|
||||||
|
|
||||||
|
transform: scale(0.9) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.btn-ani {
|
||||||
|
transition: all 0.15s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ani-right {
|
||||||
|
animation: btn-ani-right 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ani-left {
|
||||||
|
animation: btn-ani-left 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ani-up {
|
||||||
|
animation: btn-ani-up 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ani-down {
|
||||||
|
animation: btn-ani-down 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ani-big {
|
||||||
|
animation: btn-ani-big 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes btn-ani-right {
|
||||||
|
50% {
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes btn-ani-left {
|
||||||
|
50% {
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes btn-ani-up {
|
||||||
|
50% {
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes btn-ani-down {
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes btn-ani-big {
|
||||||
|
50% {
|
||||||
|
transform: scale(0.92);
|
||||||
|
}
|
||||||
|
}
|
||||||
46
src/style/mint-ui-toast.scss
Normal file
46
src/style/mint-ui-toast.scss
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
.mint-toast {
|
||||||
|
@include hz_center(500px, 120px);
|
||||||
|
// max-width: 80%;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.93);
|
||||||
|
line-height: 100px;
|
||||||
|
color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
z-index: 1000;
|
||||||
|
// pointer-events: none;
|
||||||
|
transition: opacity .3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mint-toast.is-placebottom {
|
||||||
|
bottom: 50px;
|
||||||
|
transform: translate(0, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
.mint-toast.is-placemiddle {
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(0, -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
.mint-toast.is-placetop {
|
||||||
|
top: 50px;
|
||||||
|
transform: translate(0, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
.mint-toast-icon {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 56px
|
||||||
|
}
|
||||||
|
|
||||||
|
.mint-toast-text {
|
||||||
|
font-size: 32px;
|
||||||
|
display: block;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.mint-toast-pop-enter,
|
||||||
|
.mint-toast-pop-leave-active {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
75
src/utils/index.js
Normal file
75
src/utils/index.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2020-09-01 16:20:05
|
||||||
|
* @LastEditTime: 2020-10-09 18:44:41
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /getCoinsEveryday/src/utils/index.js
|
||||||
|
*/
|
||||||
|
import {
|
||||||
|
btnTouched, // 按钮点击响应动画
|
||||||
|
showTips, // 默认弹窗插件
|
||||||
|
orientation, // 横屏提示
|
||||||
|
rebuildAjax, // request 请求方法
|
||||||
|
detectEnv, // 环境检测
|
||||||
|
checkFormalEnv, // 检查当前环境是否为正式
|
||||||
|
getQueryString, // url截取参数
|
||||||
|
getSetCookie, // 设置 cookie
|
||||||
|
updateUrl, // 更新 url
|
||||||
|
addTrackEvent, // 添加埋点
|
||||||
|
getRandomElements, // 获取数组随机元素
|
||||||
|
getJGJOpenIdAndToken, // 获取金管家 openid 和 openToken 方法
|
||||||
|
rangeRandom, // 获取随机数方法
|
||||||
|
randomSortArray, // 随机排序数组方法
|
||||||
|
hexToDec, // 字符转义
|
||||||
|
decToHex, // 字符反转义
|
||||||
|
cutString, // 截取字符串
|
||||||
|
sleep, // setTimeout es6写法
|
||||||
|
loadMusic, // H5背景乐方法
|
||||||
|
jgjShare, // 金管家 share 方法
|
||||||
|
wxSdkInitialize, // 微信环境初始化 wx jssdk
|
||||||
|
wxShare, // 微信分享重置
|
||||||
|
handleTargetEnv, // 处理目标环境
|
||||||
|
loadJs, // 异步加载 js
|
||||||
|
initial, // 初始化工具集
|
||||||
|
jgjReady, // 金管家 js 异步加载完成回调
|
||||||
|
dateFormat,
|
||||||
|
judeScrollBottom
|
||||||
|
} from "./plugins/plugin";
|
||||||
|
import preload from "./plugins/create-loader";
|
||||||
|
import './plugins/soundjs-0.6.2.min';
|
||||||
|
// import QRcode from "./plugins/qrcodejs";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
btnTouched, // 按钮点击响应动画
|
||||||
|
showTips, // 默认弹窗插件
|
||||||
|
orientation, // 横屏提示
|
||||||
|
rebuildAjax, // request 请求方法
|
||||||
|
detectEnv, // 环境检测
|
||||||
|
checkFormalEnv, // 检查当前环境是否为正式
|
||||||
|
getQueryString, // url截取参数
|
||||||
|
getSetCookie, // 设置 cookie
|
||||||
|
updateUrl, // 更新 url
|
||||||
|
addTrackEvent, // 添加埋点
|
||||||
|
getRandomElements, // 获取数组随机元素
|
||||||
|
getJGJOpenIdAndToken, // 获取金管家 openid 和 openToken 方法
|
||||||
|
rangeRandom, // 获取随机数方法
|
||||||
|
randomSortArray, // 随机排序数组方法
|
||||||
|
hexToDec, // 字符转义
|
||||||
|
decToHex, // 字符反转义
|
||||||
|
cutString, // 截取字符串
|
||||||
|
sleep, // setTimeout es6写法
|
||||||
|
loadMusic, // H5背景乐方法
|
||||||
|
jgjShare, // 金管家 share 方法
|
||||||
|
wxSdkInitialize, // 微信环境初始化 wx jssdk
|
||||||
|
wxShare, // 微信分享重置
|
||||||
|
handleTargetEnv, // 处理目标环境
|
||||||
|
loadJs, // 异步加载 js
|
||||||
|
initial, // 初始化工具集
|
||||||
|
jgjReady, // 金管家 js 异步加载完成回调
|
||||||
|
preload, // 预加载资源
|
||||||
|
dateFormat,
|
||||||
|
judeScrollBottom
|
||||||
|
// QRcode // 二维码生成工具
|
||||||
|
};
|
||||||
103
src/utils/plugins/create-loader.js
Normal file
103
src/utils/plugins/create-loader.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
/*================================*/
|
||||||
|
/*========= assets loader ========*/
|
||||||
|
/*================================*/
|
||||||
|
import "./preloadjs-0.6.2.min.js";
|
||||||
|
import "./soundjs-0.6.2.min";
|
||||||
|
export default (argument)=> {
|
||||||
|
let _default = {
|
||||||
|
imgList : [],
|
||||||
|
audioList : [],
|
||||||
|
loadStart : function(){},
|
||||||
|
progressCallBack : function(){},
|
||||||
|
completeCallBack : function(){},
|
||||||
|
errorCallBack : function(){},
|
||||||
|
}
|
||||||
|
|
||||||
|
let opts = Object.assign({}, _default, argument );
|
||||||
|
|
||||||
|
//拼合图片 音频列表
|
||||||
|
let AllList = opts.imgList.concat( opts.audioList );
|
||||||
|
|
||||||
|
let packagingListObject = (array)=>{
|
||||||
|
let file = [];
|
||||||
|
for(let i = 0 ; i < array.length; i++){
|
||||||
|
let n;
|
||||||
|
if(array[i].id){
|
||||||
|
n = {id:array[i].id,src:array[i].src}
|
||||||
|
}else{
|
||||||
|
let name = array[i].split('/');
|
||||||
|
let id = name[name.length-1].split('.');
|
||||||
|
n = {id:id[0],src:array[i]}
|
||||||
|
}
|
||||||
|
file.push(n)
|
||||||
|
}
|
||||||
|
return file;
|
||||||
|
}
|
||||||
|
|
||||||
|
//生成createjs 规范的加载对象数组
|
||||||
|
let files = packagingListObject(AllList);
|
||||||
|
|
||||||
|
let queue = new createjs.LoadQueue(true,'','*');
|
||||||
|
|
||||||
|
//设置最大连接数100
|
||||||
|
queue.setMaxConnections(10);
|
||||||
|
queue.maintainScriptOrder = true;
|
||||||
|
// if(!appPlugins.isAndriod()){
|
||||||
|
queue.installPlugin(createjs.Sound);
|
||||||
|
// }else{
|
||||||
|
// console.log(opts.audioList.length)
|
||||||
|
// if(opts.audioList.length > 0) createjs.Sound.registerSounds(opts.audioList);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// createjs.Sound.initializeDefaultPlugins()
|
||||||
|
queue.loadManifest(files);
|
||||||
|
|
||||||
|
opts.loadStart && opts.loadStart();
|
||||||
|
|
||||||
|
queue.on("progress", function() {
|
||||||
|
opts.progressCallBack && opts.progressCallBack(queue.progress);
|
||||||
|
});
|
||||||
|
|
||||||
|
queue.on("complete", function(e) {
|
||||||
|
opts.completeCallBack && opts.completeCallBack(e);
|
||||||
|
})
|
||||||
|
|
||||||
|
queue.on("error", function(e) {
|
||||||
|
opts.errorCallBack && opts.errorCallBack(e);
|
||||||
|
})
|
||||||
|
|
||||||
|
// queue.on("fileload", (e)=>{
|
||||||
|
// console.log(e.item)
|
||||||
|
// }, this);
|
||||||
|
|
||||||
|
// queue.on("error", (e)=>{
|
||||||
|
// console.log(e)
|
||||||
|
// }, this);
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
let loader = preloader({
|
||||||
|
xhrImages: false
|
||||||
|
});
|
||||||
|
//进度
|
||||||
|
loader.on('progress',(progress)=> {
|
||||||
|
opts.progressCallBack && opts.progressCallBack(progress);
|
||||||
|
});
|
||||||
|
loader.on('complete',()=> {
|
||||||
|
opts.completeCallBack && opts.completeCallBack();
|
||||||
|
});
|
||||||
|
for(var i in opts.imgList){
|
||||||
|
loader.addImage(opts.imgList[i]);
|
||||||
|
}
|
||||||
|
if(opts.audioList.length > 0){
|
||||||
|
for(var i in opts.audioList){
|
||||||
|
loader.addAudio(opts.audioList[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//加载 加载器
|
||||||
|
loader.load();
|
||||||
|
*/
|
||||||
|
|
||||||
|
return queue;
|
||||||
|
};
|
||||||
73
src/utils/plugins/good-storage.js
Normal file
73
src/utils/plugins/good-storage.js
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
/**
|
||||||
|
* good-storage v1.1.1
|
||||||
|
* (c) 2020 ustbhuangyi
|
||||||
|
*/
|
||||||
|
! function (t, e) {
|
||||||
|
"object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.Storage = e()
|
||||||
|
}(this, function () {
|
||||||
|
"use strict";
|
||||||
|
var t = Object.assign || function (t) {
|
||||||
|
for (var e = 1; e < arguments.length; e++) {
|
||||||
|
var r = arguments[e];
|
||||||
|
for (var i in r) Object.prototype.hasOwnProperty.call(r, i) && (t[i] = r[i])
|
||||||
|
}
|
||||||
|
return t
|
||||||
|
},
|
||||||
|
e = "undefined" == typeof window,
|
||||||
|
r = {
|
||||||
|
version: "1.1.1",
|
||||||
|
storage: e ? null : window.localStorage,
|
||||||
|
session: {
|
||||||
|
storage: e ? null : window.sessionStorage
|
||||||
|
}
|
||||||
|
},
|
||||||
|
i = {
|
||||||
|
set: function (t, e) {
|
||||||
|
var r;
|
||||||
|
if (!this.disabled) return void 0 === e ? this.remove(t) : (this.storage.setItem(t, (r = e, JSON.stringify(r))), e)
|
||||||
|
},
|
||||||
|
get: function (t, e) {
|
||||||
|
if (this.disabled) return e;
|
||||||
|
var r = function (e) {
|
||||||
|
if ("string" != typeof e) return;
|
||||||
|
try {
|
||||||
|
return JSON.parse(e)
|
||||||
|
} catch (t) {
|
||||||
|
return e || void 0
|
||||||
|
}
|
||||||
|
}(this.storage.getItem(t));
|
||||||
|
return void 0 === r ? e : r
|
||||||
|
},
|
||||||
|
has: function (t) {
|
||||||
|
return void 0 !== this.get(t)
|
||||||
|
},
|
||||||
|
remove: function (t) {
|
||||||
|
this.disabled || this.storage.removeItem(t)
|
||||||
|
},
|
||||||
|
clear: function () {
|
||||||
|
this.disabled || this.storage.clear()
|
||||||
|
},
|
||||||
|
getAll: function () {
|
||||||
|
if (this.disabled) return null;
|
||||||
|
var r = {};
|
||||||
|
return this.forEach(function (t, e) {
|
||||||
|
r[t] = e
|
||||||
|
}), r
|
||||||
|
},
|
||||||
|
forEach: function (t) {
|
||||||
|
if (!this.disabled)
|
||||||
|
for (var e = 0; e < this.storage.length; e++) {
|
||||||
|
var r = this.storage.key(e);
|
||||||
|
t(r, this.get(r))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
t(r, i), t(r.session, i);
|
||||||
|
try {
|
||||||
|
var n = "__storejs__";
|
||||||
|
r.set(n, n), r.get(n) !== n && (r.disabled = !0), r.remove(n)
|
||||||
|
} catch (t) {
|
||||||
|
r.disabled = !0
|
||||||
|
}
|
||||||
|
return r
|
||||||
|
});
|
||||||
1528
src/utils/plugins/plugin.js
Normal file
1528
src/utils/plugins/plugin.js
Normal file
File diff suppressed because it is too large
Load Diff
16
src/utils/plugins/preloadjs-0.6.2.min.js
vendored
Normal file
16
src/utils/plugins/preloadjs-0.6.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1542
src/utils/plugins/qrcodejs.js
Normal file
1542
src/utils/plugins/qrcodejs.js
Normal file
File diff suppressed because it is too large
Load Diff
20
src/utils/plugins/soundjs-0.6.2.min.js
vendored
Normal file
20
src/utils/plugins/soundjs-0.6.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4021
src/utils/plugins/weui.js
Executable file
4021
src/utils/plugins/weui.js
Executable file
File diff suppressed because it is too large
Load Diff
118
vue.config.js
Normal file
118
vue.config.js
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2020-09-10 18:52:15
|
||||||
|
* @LastEditTime: 2021-04-04 17:48:07
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /getCoinsEveryday/vue.config.js
|
||||||
|
*/
|
||||||
|
const path = require('path');
|
||||||
|
// const myTools = require('./webpack.plugins.js');
|
||||||
|
const CompressionPlugin = require('compression-webpack-plugin');
|
||||||
|
const vConsolePlugin = require("vconsole-webpack-plugin");
|
||||||
|
const TinyimgPlugin = require("tinyimg-webpack-plugin");
|
||||||
|
|
||||||
|
function resolve(dir) {
|
||||||
|
return path.join(__dirname, dir);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
publicPath: './',
|
||||||
|
outputDir: 'dist',
|
||||||
|
assetsDir: 'static',
|
||||||
|
lintOnSave: false,
|
||||||
|
productionSourceMap: false,
|
||||||
|
pages: {
|
||||||
|
index: {
|
||||||
|
// page 的入口
|
||||||
|
entry: 'src/page/index/main.js',
|
||||||
|
// 模板来源
|
||||||
|
template: 'public/index.html',
|
||||||
|
// 在 dist/index.html 的输出
|
||||||
|
filename: 'index.html',
|
||||||
|
// 当使用 title 选项时，
|
||||||
|
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
title: 'WebGLToy'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chainWebpack: config => {
|
||||||
|
// development模式时打包也带有 hash 值
|
||||||
|
config.output.filename('static/js/[name].[hash].js').chunkFilename('static/js/[name].[hash].js').end()
|
||||||
|
|
||||||
|
config.resolve.alias
|
||||||
|
.set("@", resolve("src"))
|
||||||
|
.set("weui", resolve("src/utils/plugins/weui.js"))
|
||||||
|
// .set("assets", resolve("src/assets"))
|
||||||
|
// .set("components", resolve("src/components"))
|
||||||
|
// .set("views", resolve("src/views"))
|
||||||
|
// .set("base", resolve("baseConfig"))
|
||||||
|
// .set("public", resolve("public"));
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV !== "test") {
|
||||||
|
config.module.rule('compile')
|
||||||
|
.test(/\.js$/)
|
||||||
|
.include
|
||||||
|
.add(resolve('src'))
|
||||||
|
.add(resolve('node_modules'))
|
||||||
|
.end()
|
||||||
|
.use('babel')
|
||||||
|
.loader('babel-loader')
|
||||||
|
.options({
|
||||||
|
presets: [
|
||||||
|
['@babel/preset-env', {
|
||||||
|
modules: false
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
configureWebpack: config => {
|
||||||
|
// 配置vconsole
|
||||||
|
const debug = process.env.NODE_ENV !== "production";
|
||||||
|
let pluginsDev = [
|
||||||
|
new vConsolePlugin({
|
||||||
|
filter: [],
|
||||||
|
enable: debug,
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
|
||||||
|
// 配置 tinyimg
|
||||||
|
let tinyimg = [new TinyimgPlugin({
|
||||||
|
enabled: process.env.NODE_ENV === "production",
|
||||||
|
logged: true
|
||||||
|
})]
|
||||||
|
|
||||||
|
config.module.rules.push({
|
||||||
|
test: /\.glsl$/,
|
||||||
|
use: [{
|
||||||
|
loader: 'webpack-glsl-loader', // 解决glsl 加载问题
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
|
||||||
|
config.plugins = [...config.plugins,
|
||||||
|
...pluginsDev,
|
||||||
|
...tinyimg
|
||||||
|
];
|
||||||
|
|
||||||
|
// 配置gzip压缩
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
return {
|
||||||
|
plugins: [new CompressionPlugin({
|
||||||
|
test: /\.js$|\.html$|\.css/, // 匹配文件名
|
||||||
|
threshold: 10240, //对超过10K的数据进行压缩
|
||||||
|
deleteOriginalAssets: false // 是否删除源文件
|
||||||
|
})]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 配置插件
|
||||||
|
pluginOptions: {
|
||||||
|
'style-resources-loader': {
|
||||||
|
preProcessor: 'less',
|
||||||
|
patterns: [
|
||||||
|
path.resolve(__dirname, './src/assets/css/global.less')
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
196
webpack.plugins.js
Normal file
196
webpack.plugins.js
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
//引入相关插件
|
||||||
|
const nodeOs = require('os');
|
||||||
|
const net = require('net');
|
||||||
|
|
||||||
|
let myTools = {
|
||||||
|
version : '1.0.0',
|
||||||
|
author : 'rucky',
|
||||||
|
print : function(){
|
||||||
|
//打印基本信息
|
||||||
|
this.nodeConsole({title:'操作系统',content:this.getSystem(),mode:4});
|
||||||
|
this.nodeConsole({title:'版本',content:nodeOs.release(),mode:1});
|
||||||
|
this.nodeConsole({title:'IP',content:this.getIP(),mode:1});
|
||||||
|
},
|
||||||
|
/**************************/
|
||||||
|
/*****↓↓↓获取本地IP↓↓↓*****/
|
||||||
|
/**************************/
|
||||||
|
getIP : function(){
|
||||||
|
let interfaces = nodeOs.networkInterfaces(); //通过node获取网络配置列表
|
||||||
|
let IP = 'localhost';
|
||||||
|
const ipArr = [];
|
||||||
|
for(let devName in interfaces){
|
||||||
|
let iface = interfaces[devName];
|
||||||
|
for(let i=0;i<iface.length;i++){
|
||||||
|
let alias = iface[i];
|
||||||
|
if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){ //已加入网络
|
||||||
|
// return alias.address
|
||||||
|
ipArr.push(alias.address)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (ipArr.length === 1) {
|
||||||
|
IP = ipArr[0]
|
||||||
|
} else if (ipArr.length > 0) {
|
||||||
|
ipArr.forEach((item,index) => {
|
||||||
|
if(item.indexOf('192.168.1') > -1) {
|
||||||
|
IP = item
|
||||||
|
}else{
|
||||||
|
IP = item;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (IP === 'localhost') {
|
||||||
|
item = ipArr[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return IP;
|
||||||
|
// example data
|
||||||
|
// [
|
||||||
|
// {
|
||||||
|
// address: 'fe80::f86b:2ce4:610e:cde1',
|
||||||
|
// netmask: 'ffff:ffff:ffff:ffff::',
|
||||||
|
// family: 'IPv6',
|
||||||
|
// mac: '64:00:6a:12:5c:03',
|
||||||
|
// scopeid: 3,
|
||||||
|
// internal: false
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// address: '192.168.31.28',
|
||||||
|
// netmask: '255.255.255.0',
|
||||||
|
// family: 'IPv4',
|
||||||
|
// mac: '64:00:6a:12:5c:03',
|
||||||
|
// internal: false
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**************************/
|
||||||
|
/**↓↓↓检测端口是否被占用↓↓↓***/
|
||||||
|
/**************************/
|
||||||
|
portIsOccupied : function(port) {
|
||||||
|
// 创建服务并监听该端口
|
||||||
|
var server = net.createServer().listen(port)
|
||||||
|
|
||||||
|
server.on('listening', function () { // 执行这块代码说明端口未被占用
|
||||||
|
server.close() // 关闭服务
|
||||||
|
// return false
|
||||||
|
console.log('The port【' + port + '】 is available.') // 控制台输出信息
|
||||||
|
})
|
||||||
|
|
||||||
|
server.on('error', function (err) {
|
||||||
|
if (err.code === 'EADDRINUSE') { // 端口已经被使用
|
||||||
|
// return true
|
||||||
|
console.log('The port【' + port + '】 is occupied, please change other port.')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**************************/
|
||||||
|
/***↓↓↓ 获取系统名称 ↓↓↓***/
|
||||||
|
/**************************/
|
||||||
|
getSystem:function(){
|
||||||
|
let system = nodeOs.platform(); //'darwin' mac, 'freebsd' UNIX, 'linux', 'sunos' sunos, 'win32' windows
|
||||||
|
let _name;
|
||||||
|
switch(system){
|
||||||
|
case 'win32':
|
||||||
|
_name = "windows";
|
||||||
|
break;
|
||||||
|
case 'linux':
|
||||||
|
_name = system;
|
||||||
|
break;
|
||||||
|
case 'darwin':
|
||||||
|
_name = "mac";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
_name = "windows";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return _name;
|
||||||
|
},
|
||||||
|
/**************************/
|
||||||
|
/***↓↓↓ node Console ↓↓↓***/
|
||||||
|
/**************************/
|
||||||
|
nodeConsole:function(param){
|
||||||
|
let _default = { // 标题
|
||||||
|
title: 'Rucky',
|
||||||
|
content: typeof param == 'string'? param : 'Lee', // 内容 如果传入内容为字符串直接赋值给content
|
||||||
|
mode: 1, // 1-*,2-=,3--,4-<>
|
||||||
|
maxLen: 27, // 内容最大字节 默认左右各空4个 中间可描述字符19 默认gap / ** / 4个字符
|
||||||
|
betweenLen:17
|
||||||
|
};
|
||||||
|
|
||||||
|
let opts = Object.assign({}, _default, param );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let getLength = function(str) {
|
||||||
|
return (str ? str : 'undefined').replace(/[\u0391-\uFFE5]/g,"aa").length; //先把中文替换成两个字节的英文，在计算长度
|
||||||
|
}
|
||||||
|
|
||||||
|
let createSpaceStr = function(len,symbol){
|
||||||
|
let placeholder = symbol ? symbol: ' ';
|
||||||
|
let array = [];
|
||||||
|
for(let i = 0 ; i < len ; i++ ){
|
||||||
|
if(symbol == '>' && i > len/2)
|
||||||
|
placeholder = Symbols[5]
|
||||||
|
array.push(placeholder);
|
||||||
|
}
|
||||||
|
return array.join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
let trueLen = getLength(opts.title)+getLength(opts.content);
|
||||||
|
|
||||||
|
let messageStr = '';
|
||||||
|
let gap = []; //' ** '
|
||||||
|
let extra = opts.maxLen-trueLen;
|
||||||
|
let startSpace,endSpace;
|
||||||
|
let topSymbol,bottomSymbol;
|
||||||
|
let Symbols = ['','*','=','-','>','<'];
|
||||||
|
// console.error(trueLen)
|
||||||
|
if(extra >= 0){
|
||||||
|
topSymbol = bottomSymbol = createSpaceStr(opts.maxLen+opts.betweenLen,Symbols[opts.mode]);
|
||||||
|
if(extra > 8){ //如果大于8空格 旁边则保留4空格
|
||||||
|
startSpace = endSpace = createSpaceStr(4);
|
||||||
|
// console.log(extra)
|
||||||
|
if(extra >= 12){ //如果大于12空格 则中间加gap
|
||||||
|
gap = ' '+Symbols[opts.mode]+Symbols[opts.mode]+' ';
|
||||||
|
startSpace = endSpace = createSpaceStr((extra-4)/2);
|
||||||
|
endSpace = createSpaceStr(((extra-4)/2)%2 == 0 ? (extra-4)/2: (extra-4)/2-1);
|
||||||
|
}else{
|
||||||
|
gap = createSpaceStr((extra-8)/2);
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
gap = '';
|
||||||
|
endSpace = createSpaceStr(extra%2 == 0 ? (extra/2) : Math.ceil(extra/2));
|
||||||
|
}
|
||||||
|
messageStr = startSpace+param.title+gap+param.content+endSpace;
|
||||||
|
}else{
|
||||||
|
topSymbol = bottomSymbol =createSpaceStr(trueLen+opts.betweenLen,Symbols[opts.mode]);
|
||||||
|
messageStr = opts.title ? (param.title+param.content):param.content;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let showTemplate = [
|
||||||
|
topSymbol+'\n'+'*********'+messageStr+'********\n'+bottomSymbol,
|
||||||
|
topSymbol+'\n'+'========='+messageStr+'========\n'+bottomSymbol,
|
||||||
|
topSymbol+'\n'+'---------'+messageStr+'--------\n'+bottomSymbol,
|
||||||
|
topSymbol+'\n'+'>>>>>>>>>'+messageStr+'<<<<<<<<\n'+bottomSymbol
|
||||||
|
]
|
||||||
|
console.log(showTemplate[Number(opts.mode)-1])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myTools.print();
|
||||||
|
|
||||||
|
module.exports = myTools;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ------------------------------
|
||||||
|
*
|
||||||
|
* @author : Rucky
|
||||||
|
* @cntQQ ：344879627
|
||||||
|
* @info : My local env config
|
||||||
|
*
|
||||||
|
* ------------------------------
|
||||||
|
*/
|
||||||
Loading…
Reference in New Issue
Block a user