@@ -0,0 +1,2 @@ | |||
> 1% | |||
last 2 versions |
@@ -0,0 +1,6 @@ | |||
[*.{js,jsx,ts,tsx,vue}] | |||
indent_style = space | |||
indent_size = 2 | |||
trim_trailing_whitespace = true | |||
insert_final_newline = true | |||
@@ -0,0 +1,2 @@ | |||
# VUE_APP_ERUDA true表示启用Eruda调试工具 | |||
VUE_APP_ERUDA=false |
@@ -0,0 +1,2 @@ | |||
# VUE_APP_ERUDA true表示启用Eruda调试工具 | |||
VUE_APP_ERUDA=false |
@@ -0,0 +1,21 @@ | |||
module.exports = { | |||
root: true, | |||
env: { | |||
node: true | |||
}, | |||
'extends': [ | |||
'plugin:vue/essential', | |||
'@vue/standard' | |||
], | |||
rules: { | |||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | |||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | |||
'semi': 0, // 分号 | |||
camelcase: 0, // | |||
'comma-dangle': 0, // 逗号 | |||
'space-before-function-paren': 0, | |||
}, | |||
parserOptions: { | |||
parser: 'babel-eslint' | |||
} | |||
} |
@@ -0,0 +1,21 @@ | |||
.DS_Store | |||
node_modules | |||
/dist | |||
# local env files | |||
.env.local | |||
.env.*.local | |||
# Log files | |||
npm-debug.log* | |||
yarn-debug.log* | |||
yarn-error.log* | |||
# Editor directories and files | |||
.idea | |||
.vscode | |||
*.suo | |||
*.ntvs* | |||
*.njsproj | |||
*.sln | |||
*.sw? |
@@ -0,0 +1,21 @@ | |||
MIT License | |||
Copyright (c) 2019 now1then | |||
Permission is hereby granted, free of charge, to any person obtaining a copy | |||
of this software and associated documentation files (the "Software"), to deal | |||
in the Software without restriction, including without limitation the rights | |||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |||
copies of the Software, and to permit persons to whom the Software is | |||
furnished to do so, subject to the following conditions: | |||
The above copyright notice and this permission notice shall be included in all | |||
copies or substantial portions of the Software. | |||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |||
SOFTWARE. |
@@ -0,0 +1,63 @@ | |||
# [富茂服务商](https://github.com/now1then/富茂服务商) | |||
[](https://github.com/vuejs/vue) | |||
[](https://github.com//now1then/富茂服务商/master/LICENSE) | |||
🚀 基于@vue/CLI3构建的移动端h5项目模板。 | |||
## 说明 | |||
项目涉及@vue/CLI3构建、移动端h5开发、axios封装、通用化组件等。 | |||
持续更新... | |||
### 特性 | |||
- 基于`@vue/cli3` | |||
- CSS 预编译语言:[less](http://lesscss.org/),全局样式初始化 | |||
- ajax封装,借助Axios库实现http请求 | |||
- vue-router封装;懒加载、拦截 | |||
- 页面平滑切换 | |||
- 通用化组件 | |||
- 移动端适配 | |||
- 可视化分析工具 | |||
- 项目结构拆分 等... | |||
项目详细介绍博客:[https://www.yuque.com/nowthen/longroad/gyffxo](https://www.yuque.com/nowthen/longroad/gyffxo) | |||
### 目录结构 | |||
 | |||
## 构建命令 | |||
### 克隆项目 | |||
``` | |||
git clone git@github.com:now1then/富茂服务商.git | |||
``` | |||
### 初始化依赖配置 | |||
``` | |||
yarn install | |||
``` | |||
### 开发环境 启动运行 | |||
``` | |||
yarn run serve | |||
``` | |||
### 生产环境 打包构建 | |||
``` | |||
yarn run build | |||
yarn build --report // 打包分析 | |||
``` | |||
### 自动化测试 | |||
``` | |||
yarn run test | |||
``` | |||
### Lint检查并修复 | |||
``` | |||
yarn run lint | |||
``` | |||
### 配置参考 | |||
See [CLI配置参考](https://cli.vuejs.org/zh/config/). |
@@ -0,0 +1,16 @@ | |||
module.exports = { | |||
presets: [ | |||
['@vue/app', { | |||
'polyfills': [ | |||
'es6.string.includes' | |||
] | |||
}] | |||
], | |||
'plugins': [ | |||
['import', { | |||
libraryName: 'vant', | |||
libraryDirectory: 'es', | |||
style: true | |||
}, 'vant'] | |||
] | |||
} |
@@ -0,0 +1,53 @@ | |||
{ | |||
"name": "fumao", | |||
"author": { | |||
"name": "nowthen", | |||
"email": "rnlvwyx@gmail.com" | |||
}, | |||
"description": "基于@vue/CLI3构建的移动端h5项目模板", | |||
"keywords": [ | |||
"vue-h5", | |||
"vue-cli", | |||
"@vue/CLI3", | |||
"vue", | |||
"webpack4", | |||
"富茂服务商", | |||
"nowthen" | |||
], | |||
"version": "0.1.0", | |||
"private": true, | |||
"scripts": { | |||
"dev": "vue-cli-service serve", | |||
"build": "vue-cli-service build", | |||
"lint": "vue-cli-service lint" | |||
}, | |||
"dependencies": { | |||
"axios": "^0.19.0", | |||
"core-js": "^2.6.5", | |||
"echarts": "^4.9.0", | |||
"fastclick": "^1.0.6", | |||
"lib-flexible": "^0.3.2", | |||
"mint-ui": "^2.2.13", | |||
"vant": "^2.10.3", | |||
"vue": "^2.6.10", | |||
"vue-router": "^3.0.3", | |||
"vuex": "^3.0.1" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-babel": "^3.10.0", | |||
"@vue/cli-plugin-eslint": "^3.10.0", | |||
"@vue/cli-service": "^3.10.0", | |||
"@vue/eslint-config-standard": "^4.0.0", | |||
"babel-eslint": "^10.0.1", | |||
"babel-plugin-component": "^1.1.1", | |||
"babel-plugin-import": "^1.13.0", | |||
"eslint": "^5.16.0", | |||
"eslint-plugin-vue": "^5.0.0", | |||
"less": "^3.0.4", | |||
"less-loader": "^4.1.0", | |||
"postcss-pxtorem": "^4.0.1", | |||
"style-resources-loader": "^1.2.1", | |||
"vue-template-compiler": "^2.6.10", | |||
"webpack-bundle-analyzer": "^3.4.1" | |||
} | |||
} |
@@ -0,0 +1,12 @@ | |||
module.exports = { | |||
plugins: { | |||
'autoprefixer': {}, | |||
'postcss-pxtorem': { | |||
'rootValue': 37.5, // 设计稿宽度的1/10 | |||
'unitPrecision': 5, // 小数位 | |||
'minPixelValue': 1, // 转换的最小单位 | |||
'selectorBlackList': [], // 忽略的样式, 正则 | |||
'propList': ['*'] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部,正则 | |||
} | |||
} | |||
} |
@@ -0,0 +1,27 @@ | |||
<!DOCTYPE html> | |||
<html lang="zh-CN"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" /> | |||
<meta name="apple-mobile-web-app-capable" content="yes"> | |||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> | |||
<meta content="telephone=no,email=no" name="format-detection" /> | |||
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> --> | |||
<link rel="icon" href="<%= BASE_URL %>cat.png"> | |||
<title>vue-demo</title> | |||
</head> | |||
<body> | |||
<noscript> | |||
<strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||
</noscript> | |||
<div id="app"></div> | |||
<!-- built files will be auto injected --> | |||
<!--手机调试--> | |||
<% if (VUE_APP_ERUDA === 'true') { %> | |||
<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script> | |||
<script> window.eruda.init(); </script> | |||
<% } %> | |||
</body> | |||
</html> |
@@ -0,0 +1,173 @@ | |||
<template> | |||
<div id="app"> | |||
<!-- <van-button type="info">主要按钮</van-button> --> | |||
<transition :name="direction"> | |||
<router-view class="page" /> | |||
</transition> | |||
<!-- 底部导航 --> | |||
<div class="foot-bar"> | |||
<router-link class="foot-item" @click="selRouter(index)" v-for="(item,index) in footBarList" :key="item.path" :to="{name:item.path}"> | |||
<img class="foot-icon" :src="item.checked ? item.iconY : item.iconN" /> | |||
<span class="foot-title">{{item.title}}</span> | |||
</router-link> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'App', | |||
data() { | |||
return { | |||
footBarList: [ | |||
{ | |||
iconY: require('./assets/images/home-y.png'), | |||
iconN: require('./assets/images/home-n.png'), | |||
checked: true, | |||
title: '首页', | |||
path: 'hello', | |||
}, | |||
/* { | |||
iconY: require('./assets/images/bill1.png'), | |||
iconN: require('./assets/images/bill.png'), | |||
checked: false, | |||
title: '账单', | |||
path: 'vueView', | |||
}, */ | |||
{ | |||
iconY: require('./assets/images/user-y.png'), | |||
iconN: require('./assets/images/user-n.png'), | |||
checked: false, | |||
title: '我的', | |||
path: 'person', | |||
}, | |||
] | |||
}; | |||
}, | |||
computed: { | |||
// 动态设置过渡样式 | |||
direction: function() { | |||
const currentPath = this.$route.path; | |||
const localRoute = (window.myVue && window.myVue.localRoute) || []; | |||
// console.log(localRoute, currentPath); | |||
const index = localRoute.indexOf(currentPath); | |||
let tranName = 'fade'; | |||
/* if (localRoute.length === 0) { | |||
tranName = 'fade'; // 首页,渐显 | |||
} else if (index >= 0) { | |||
tranName = 'page-back'; // 回退,右划 | |||
} else { | |||
tranName = 'page-go'; // 进入新页面,左划 | |||
} */ | |||
return tranName; | |||
} | |||
}, | |||
watch: { | |||
$route(to, from) { | |||
// console.log(to); | |||
// console.log(from); | |||
} | |||
}, | |||
created() { | |||
console.log('欢迎访问...'); | |||
}, | |||
methods: { | |||
selRouter(index) { | |||
console.log(index) | |||
this.footBarList.map(item => { | |||
item.checked = false; | |||
}) | |||
this.footBarList[index].checked = true; | |||
}, | |||
} | |||
}; | |||
</script> | |||
<style lang="less"> | |||
#app { | |||
font-family: 'Avenir', Helvetica, Arial, sans-serif; | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
text-align: center; | |||
color: @colorFont; | |||
font-size: @fontSizeH3; | |||
.fade-enter-active, | |||
.fade-leave-active { | |||
transition: all 0.2s ease; | |||
} | |||
.fade-enter, | |||
.fade-leave-active { | |||
opacity: 0; | |||
} | |||
.page { | |||
transition: all 0.8s ease-in-out; | |||
} | |||
.page-go-enter-active { | |||
transform: translate3d(100%, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
.page-go-enter-to { | |||
transform: translate3d(0, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
.page-go-leave-active { | |||
transform: translate3d(0, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
.page-go-leave-to { | |||
transform: translate3d(-100%, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
.page-back-enter-active { | |||
transform: translate3d(-100%, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
.page-back-enter-to { | |||
transform: translate3d(0, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
.page-back-leave-active { | |||
transform: translate3d(0, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
.page-back-leave-to { | |||
transform: translate3d(100%, 0, 0); | |||
// transition: all 0.8s ease-in-out; | |||
} | |||
// | |||
.foot-bar { | |||
position: fixed; | |||
left: 0; | |||
bottom: 0; | |||
display: flex; | |||
width: 100%; | |||
height: 1.6rem; | |||
justify-content: space-between; | |||
align-items: center; | |||
border: .01rem solid #eee; | |||
background: #fff; | |||
} | |||
.foot-item { | |||
flex: 1; | |||
flex-direction: column; | |||
} | |||
.foot-icon { | |||
display: block; | |||
width: .9rem; | |||
height: .9rem; | |||
margin: 0 auto; | |||
} | |||
.foot-title { | |||
display: block; | |||
font-size: .22rem; | |||
margin: 0 auto; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,539 @@ | |||
/* Logo 字体 */ | |||
@font-face { | |||
font-family: "iconfont logo"; | |||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); | |||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), | |||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), | |||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), | |||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); | |||
} | |||
.logo { | |||
font-family: "iconfont logo"; | |||
font-size: 160px; | |||
font-style: normal; | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
} | |||
/* tabs */ | |||
.nav-tabs { | |||
position: relative; | |||
} | |||
.nav-tabs .nav-more { | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
height: 42px; | |||
line-height: 42px; | |||
color: #666; | |||
} | |||
#tabs { | |||
border-bottom: 1px solid #eee; | |||
} | |||
#tabs li { | |||
cursor: pointer; | |||
width: 100px; | |||
height: 40px; | |||
line-height: 40px; | |||
text-align: center; | |||
font-size: 16px; | |||
border-bottom: 2px solid transparent; | |||
position: relative; | |||
z-index: 1; | |||
margin-bottom: -1px; | |||
color: #666; | |||
} | |||
#tabs .active { | |||
border-bottom-color: #f00; | |||
color: #222; | |||
} | |||
.tab-container .content { | |||
display: none; | |||
} | |||
/* 页面布局 */ | |||
.main { | |||
padding: 30px 100px; | |||
width: 960px; | |||
margin: 0 auto; | |||
} | |||
.main .logo { | |||
color: #333; | |||
text-align: left; | |||
margin-bottom: 30px; | |||
line-height: 1; | |||
height: 110px; | |||
margin-top: -50px; | |||
overflow: hidden; | |||
*zoom: 1; | |||
} | |||
.main .logo a { | |||
font-size: 160px; | |||
color: #333; | |||
} | |||
.helps { | |||
margin-top: 40px; | |||
} | |||
.helps pre { | |||
padding: 20px; | |||
margin: 10px 0; | |||
border: solid 1px #e7e1cd; | |||
background-color: #fffdef; | |||
overflow: auto; | |||
} | |||
.icon_lists { | |||
width: 100% !important; | |||
overflow: hidden; | |||
*zoom: 1; | |||
} | |||
.icon_lists li { | |||
width: 100px; | |||
margin-bottom: 10px; | |||
margin-right: 20px; | |||
text-align: center; | |||
list-style: none !important; | |||
cursor: default; | |||
} | |||
.icon_lists li .code-name { | |||
line-height: 1.2; | |||
} | |||
.icon_lists .icon { | |||
display: block; | |||
height: 100px; | |||
line-height: 100px; | |||
font-size: 42px; | |||
margin: 10px auto; | |||
color: #333; | |||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; | |||
-moz-transition: font-size 0.25s linear, width 0.25s linear; | |||
transition: font-size 0.25s linear, width 0.25s linear; | |||
} | |||
.icon_lists .icon:hover { | |||
font-size: 100px; | |||
} | |||
.icon_lists .svg-icon { | |||
/* 通过设置 font-size 来改变图标大小 */ | |||
width: 1em; | |||
/* 图标和文字相邻时,垂直对齐 */ | |||
vertical-align: -0.15em; | |||
/* 通过设置 color 来改变 SVG 的颜色/fill */ | |||
fill: currentColor; | |||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 | |||
normalize.css 中也包含这行 */ | |||
overflow: hidden; | |||
} | |||
.icon_lists li .name, | |||
.icon_lists li .code-name { | |||
color: #666; | |||
} | |||
/* markdown 样式 */ | |||
.markdown { | |||
color: #666; | |||
font-size: 14px; | |||
line-height: 1.8; | |||
} | |||
.highlight { | |||
line-height: 1.5; | |||
} | |||
.markdown img { | |||
vertical-align: middle; | |||
max-width: 100%; | |||
} | |||
.markdown h1 { | |||
color: #404040; | |||
font-weight: 500; | |||
line-height: 40px; | |||
margin-bottom: 24px; | |||
} | |||
.markdown h2, | |||
.markdown h3, | |||
.markdown h4, | |||
.markdown h5, | |||
.markdown h6 { | |||
color: #404040; | |||
margin: 1.6em 0 0.6em 0; | |||
font-weight: 500; | |||
clear: both; | |||
} | |||
.markdown h1 { | |||
font-size: 28px; | |||
} | |||
.markdown h2 { | |||
font-size: 22px; | |||
} | |||
.markdown h3 { | |||
font-size: 16px; | |||
} | |||
.markdown h4 { | |||
font-size: 14px; | |||
} | |||
.markdown h5 { | |||
font-size: 12px; | |||
} | |||
.markdown h6 { | |||
font-size: 12px; | |||
} | |||
.markdown hr { | |||
height: 1px; | |||
border: 0; | |||
background: #e9e9e9; | |||
margin: 16px 0; | |||
clear: both; | |||
} | |||
.markdown p { | |||
margin: 1em 0; | |||
} | |||
.markdown>p, | |||
.markdown>blockquote, | |||
.markdown>.highlight, | |||
.markdown>ol, | |||
.markdown>ul { | |||
width: 80%; | |||
} | |||
.markdown ul>li { | |||
list-style: circle; | |||
} | |||
.markdown>ul li, | |||
.markdown blockquote ul>li { | |||
margin-left: 20px; | |||
padding-left: 4px; | |||
} | |||
.markdown>ul li p, | |||
.markdown>ol li p { | |||
margin: 0.6em 0; | |||
} | |||
.markdown ol>li { | |||
list-style: decimal; | |||
} | |||
.markdown>ol li, | |||
.markdown blockquote ol>li { | |||
margin-left: 20px; | |||
padding-left: 4px; | |||
} | |||
.markdown code { | |||
margin: 0 3px; | |||
padding: 0 5px; | |||
background: #eee; | |||
border-radius: 3px; | |||
} | |||
.markdown strong, | |||
.markdown b { | |||
font-weight: 600; | |||
} | |||
.markdown>table { | |||
border-collapse: collapse; | |||
border-spacing: 0px; | |||
empty-cells: show; | |||
border: 1px solid #e9e9e9; | |||
width: 95%; | |||
margin-bottom: 24px; | |||
} | |||
.markdown>table th { | |||
white-space: nowrap; | |||
color: #333; | |||
font-weight: 600; | |||
} | |||
.markdown>table th, | |||
.markdown>table td { | |||
border: 1px solid #e9e9e9; | |||
padding: 8px 16px; | |||
text-align: left; | |||
} | |||
.markdown>table th { | |||
background: #F7F7F7; | |||
} | |||
.markdown blockquote { | |||
font-size: 90%; | |||
color: #999; | |||
border-left: 4px solid #e9e9e9; | |||
padding-left: 0.8em; | |||
margin: 1em 0; | |||
} | |||
.markdown blockquote p { | |||
margin: 0; | |||
} | |||
.markdown .anchor { | |||
opacity: 0; | |||
transition: opacity 0.3s ease; | |||
margin-left: 8px; | |||
} | |||
.markdown .waiting { | |||
color: #ccc; | |||
} | |||
.markdown h1:hover .anchor, | |||
.markdown h2:hover .anchor, | |||
.markdown h3:hover .anchor, | |||
.markdown h4:hover .anchor, | |||
.markdown h5:hover .anchor, | |||
.markdown h6:hover .anchor { | |||
opacity: 1; | |||
display: inline-block; | |||
} | |||
.markdown>br, | |||
.markdown>p>br { | |||
clear: both; | |||
} | |||
.hljs { | |||
display: block; | |||
background: white; | |||
padding: 0.5em; | |||
color: #333333; | |||
overflow-x: auto; | |||
} | |||
.hljs-comment, | |||
.hljs-meta { | |||
color: #969896; | |||
} | |||
.hljs-string, | |||
.hljs-variable, | |||
.hljs-template-variable, | |||
.hljs-strong, | |||
.hljs-emphasis, | |||
.hljs-quote { | |||
color: #df5000; | |||
} | |||
.hljs-keyword, | |||
.hljs-selector-tag, | |||
.hljs-type { | |||
color: #a71d5d; | |||
} | |||
.hljs-literal, | |||
.hljs-symbol, | |||
.hljs-bullet, | |||
.hljs-attribute { | |||
color: #0086b3; | |||
} | |||
.hljs-section, | |||
.hljs-name { | |||
color: #63a35c; | |||
} | |||
.hljs-tag { | |||
color: #333333; | |||
} | |||
.hljs-title, | |||
.hljs-attr, | |||
.hljs-selector-id, | |||
.hljs-selector-class, | |||
.hljs-selector-attr, | |||
.hljs-selector-pseudo { | |||
color: #795da3; | |||
} | |||
.hljs-addition { | |||
color: #55a532; | |||
background-color: #eaffea; | |||
} | |||
.hljs-deletion { | |||
color: #bd2c00; | |||
background-color: #ffecec; | |||
} | |||
.hljs-link { | |||
text-decoration: underline; | |||
} | |||
/* 代码高亮 */ | |||
/* PrismJS 1.15.0 | |||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ | |||
/** | |||
* prism.js default theme for JavaScript, CSS and HTML | |||
* Based on dabblet (http://dabblet.com) | |||
* @author Lea Verou | |||
*/ | |||
code[class*="language-"], | |||
pre[class*="language-"] { | |||
color: black; | |||
background: none; | |||
text-shadow: 0 1px white; | |||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; | |||
text-align: left; | |||
white-space: pre; | |||
word-spacing: normal; | |||
word-break: normal; | |||
word-wrap: normal; | |||
line-height: 1.5; | |||
-moz-tab-size: 4; | |||
-o-tab-size: 4; | |||
tab-size: 4; | |||
-webkit-hyphens: none; | |||
-moz-hyphens: none; | |||
-ms-hyphens: none; | |||
hyphens: none; | |||
} | |||
pre[class*="language-"]::-moz-selection, | |||
pre[class*="language-"] ::-moz-selection, | |||
code[class*="language-"]::-moz-selection, | |||
code[class*="language-"] ::-moz-selection { | |||
text-shadow: none; | |||
background: #b3d4fc; | |||
} | |||
pre[class*="language-"]::selection, | |||
pre[class*="language-"] ::selection, | |||
code[class*="language-"]::selection, | |||
code[class*="language-"] ::selection { | |||
text-shadow: none; | |||
background: #b3d4fc; | |||
} | |||
@media print { | |||
code[class*="language-"], | |||
pre[class*="language-"] { | |||
text-shadow: none; | |||
} | |||
} | |||
/* Code blocks */ | |||
pre[class*="language-"] { | |||
padding: 1em; | |||
margin: .5em 0; | |||
overflow: auto; | |||
} | |||
:not(pre)>code[class*="language-"], | |||
pre[class*="language-"] { | |||
background: #f5f2f0; | |||
} | |||
/* Inline code */ | |||
:not(pre)>code[class*="language-"] { | |||
padding: .1em; | |||
border-radius: .3em; | |||
white-space: normal; | |||
} | |||
.token.comment, | |||
.token.prolog, | |||
.token.doctype, | |||
.token.cdata { | |||
color: slategray; | |||
} | |||
.token.punctuation { | |||
color: #999; | |||
} | |||
.namespace { | |||
opacity: .7; | |||
} | |||
.token.property, | |||
.token.tag, | |||
.token.boolean, | |||
.token.number, | |||
.token.constant, | |||
.token.symbol, | |||
.token.deleted { | |||
color: #905; | |||
} | |||
.token.selector, | |||
.token.attr-name, | |||
.token.string, | |||
.token.char, | |||
.token.builtin, | |||
.token.inserted { | |||
color: #690; | |||
} | |||
.token.operator, | |||
.token.entity, | |||
.token.url, | |||
.language-css .token.string, | |||
.style .token.string { | |||
color: #9a6e3a; | |||
background: hsla(0, 0%, 100%, .5); | |||
} | |||
.token.atrule, | |||
.token.attr-value, | |||
.token.keyword { | |||
color: #07a; | |||
} | |||
.token.function, | |||
.token.class-name { | |||
color: #DD4A68; | |||
} | |||
.token.regex, | |||
.token.important, | |||
.token.variable { | |||
color: #e90; | |||
} | |||
.token.important, | |||
.token.bold { | |||
font-weight: bold; | |||
} | |||
.token.italic { | |||
font-style: italic; | |||
} | |||
.token.entity { | |||
cursor: help; | |||
} |
@@ -0,0 +1,745 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"/> | |||
<title>IconFont Demo</title> | |||
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> | |||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> | |||
<link rel="stylesheet" href="demo.css"> | |||
<link rel="stylesheet" href="iconfont.css"> | |||
<script src="iconfont.js"></script> | |||
<!-- jQuery --> | |||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> | |||
<!-- 代码高亮 --> | |||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> | |||
</head> | |||
<body> | |||
<div class="main"> | |||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> | |||
<div class="nav-tabs"> | |||
<ul id="tabs" class="dib-box"> | |||
<li class="dib active"><span>Unicode</span></li> | |||
<li class="dib"><span>Font class</span></li> | |||
<li class="dib"><span>Symbol</span></li> | |||
</ul> | |||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1364703" target="_blank" class="nav-more">查看项目</a> | |||
</div> | |||
<div class="tab-container"> | |||
<div class="content unicode" style="display: block;"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">手机</div> | |||
<div class="code-name">&#xe648;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">客服</div> | |||
<div class="code-name">&#xe65a;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">勾</div> | |||
<div class="code-name">&#xe881;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">问号</div> | |||
<div class="code-name">&#xe682;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">语音</div> | |||
<div class="code-name">&#xe614;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">二维码</div> | |||
<div class="code-name">&#xe620;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">叉</div> | |||
<div class="code-name">&#xe621;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">点赞</div> | |||
<div class="code-name">&#xe623;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">拒绝</div> | |||
<div class="code-name">&#xe627;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">签约费用</div> | |||
<div class="code-name">&#xe62b;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">私信</div> | |||
<div class="code-name">&#xe62c;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">删除</div> | |||
<div class="code-name">&#xe62e;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">退出</div> | |||
<div class="code-name">&#xe634;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">投顾推荐</div> | |||
<div class="code-name">&#xe635;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">活动专区</div> | |||
<div class="code-name">&#xe64a;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">掘金</div> | |||
<div class="code-name">&#xe600;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">right</div> | |||
<div class="code-name">&#xe7eb;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">身份卡</div> | |||
<div class="code-name">&#xe66e;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">github</div> | |||
<div class="code-name">&#xe64b;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">成立时间</div> | |||
<div class="code-name">&#xe677;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">法人代表</div> | |||
<div class="code-name">&#xe678;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">注册资金</div> | |||
<div class="code-name">&#xe67a;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">标题右</div> | |||
<div class="code-name">&#xe67b;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">标题左</div> | |||
<div class="code-name">&#xe67c;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">语雀</div> | |||
<div class="code-name">&#xe60e;</div> | |||
</li> | |||
</ul> | |||
<div class="article markdown"> | |||
<h2 id="unicode-">Unicode 引用</h2> | |||
<hr> | |||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> | |||
<ul> | |||
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> | |||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> | |||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> | |||
</ul> | |||
<blockquote> | |||
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> | |||
</blockquote> | |||
<p>Unicode 使用步骤如下:</p> | |||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> | |||
<pre><code class="language-css" | |||
>@font-face { | |||
font-family: 'iconfont'; | |||
src: url('iconfont.eot'); | |||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), | |||
url('iconfont.woff2') format('woff2'), | |||
url('iconfont.woff') format('woff'), | |||
url('iconfont.ttf') format('truetype'), | |||
url('iconfont.svg#iconfont') format('svg'); | |||
} | |||
</code></pre> | |||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> | |||
<pre><code class="language-css" | |||
>.iconfont { | |||
font-family: "iconfont" !important; | |||
font-size: 16px; | |||
font-style: normal; | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
} | |||
</code></pre> | |||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> | |||
<pre> | |||
<code class="language-html" | |||
><span class="iconfont">&#x33;</span> | |||
</code></pre> | |||
<blockquote> | |||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> | |||
</blockquote> | |||
</div> | |||
</div> | |||
<div class="content font-class"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-mobile"></span> | |||
<div class="name"> | |||
手机 | |||
</div> | |||
<div class="code-name">.iconRN-mobile | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-kefu"></span> | |||
<div class="name"> | |||
客服 | |||
</div> | |||
<div class="code-name">.iconRN-kefu | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-gou"></span> | |||
<div class="name"> | |||
勾 | |||
</div> | |||
<div class="code-name">.iconRN-gou | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-question"></span> | |||
<div class="name"> | |||
问号 | |||
</div> | |||
<div class="code-name">.iconRN-question | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-yuyin"></span> | |||
<div class="name"> | |||
语音 | |||
</div> | |||
<div class="code-name">.iconRN-yuyin | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-erweima"></span> | |||
<div class="name"> | |||
二维码 | |||
</div> | |||
<div class="code-name">.iconRN-erweima | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-cha"></span> | |||
<div class="name"> | |||
叉 | |||
</div> | |||
<div class="code-name">.iconRN-cha | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-dianzan"></span> | |||
<div class="name"> | |||
点赞 | |||
</div> | |||
<div class="code-name">.iconRN-dianzan | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-jujue"></span> | |||
<div class="name"> | |||
拒绝 | |||
</div> | |||
<div class="code-name">.iconRN-jujue | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-edit"></span> | |||
<div class="name"> | |||
签约费用 | |||
</div> | |||
<div class="code-name">.iconRN-edit | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-private-letter"></span> | |||
<div class="name"> | |||
私信 | |||
</div> | |||
<div class="code-name">.iconRN-private-letter | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-shanchu"></span> | |||
<div class="name"> | |||
删除 | |||
</div> | |||
<div class="code-name">.iconRN-shanchu | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-tuichu"></span> | |||
<div class="name"> | |||
退出 | |||
</div> | |||
<div class="code-name">.iconRN-tuichu | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-recommend"></span> | |||
<div class="name"> | |||
投顾推荐 | |||
</div> | |||
<div class="code-name">.iconRN-recommend | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-gift-active"></span> | |||
<div class="name"> | |||
活动专区 | |||
</div> | |||
<div class="code-name">.iconRN-gift-active | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-juejin"></span> | |||
<div class="name"> | |||
掘金 | |||
</div> | |||
<div class="code-name">.iconRN-juejin | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-right"></span> | |||
<div class="name"> | |||
right | |||
</div> | |||
<div class="code-name">.iconRN-right | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-id-card"></span> | |||
<div class="name"> | |||
身份卡 | |||
</div> | |||
<div class="code-name">.iconRN-id-card | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-git"></span> | |||
<div class="name"> | |||
github | |||
</div> | |||
<div class="code-name">.iconRN-git | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-time"></span> | |||
<div class="name"> | |||
成立时间 | |||
</div> | |||
<div class="code-name">.iconRN-time | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-faren"></span> | |||
<div class="name"> | |||
法人代表 | |||
</div> | |||
<div class="code-name">.iconRN-faren | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-money"></span> | |||
<div class="name"> | |||
注册资金 | |||
</div> | |||
<div class="code-name">.iconRN-money | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-title-right"></span> | |||
<div class="name"> | |||
标题右 | |||
</div> | |||
<div class="code-name">.iconRN-title-right | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-title-left"></span> | |||
<div class="name"> | |||
标题左 | |||
</div> | |||
<div class="code-name">.iconRN-title-left | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont iconRN-yuque"></span> | |||
<div class="name"> | |||
语雀 | |||
</div> | |||
<div class="code-name">.iconRN-yuque | |||
</div> | |||
</li> | |||
</ul> | |||
<div class="article markdown"> | |||
<h2 id="font-class-">font-class 引用</h2> | |||
<hr> | |||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> | |||
<p>与 Unicode 使用方式相比,具有如下特点:</p> | |||
<ul> | |||
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> | |||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> | |||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> | |||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> | |||
</ul> | |||
<p>使用步骤如下:</p> | |||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> | |||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> | |||
</code></pre> | |||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> | |||
<pre><code class="language-html"><span class="iconfont iconRN-xxx"></span> | |||
</code></pre> | |||
<blockquote> | |||
<p>" | |||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> | |||
</blockquote> | |||
</div> | |||
</div> | |||
<div class="content symbol"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-mobile"></use> | |||
</svg> | |||
<div class="name">手机</div> | |||
<div class="code-name">#iconRN-mobile</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-kefu"></use> | |||
</svg> | |||
<div class="name">客服</div> | |||
<div class="code-name">#iconRN-kefu</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-gou"></use> | |||
</svg> | |||
<div class="name">勾</div> | |||
<div class="code-name">#iconRN-gou</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-question"></use> | |||
</svg> | |||
<div class="name">问号</div> | |||
<div class="code-name">#iconRN-question</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-yuyin"></use> | |||
</svg> | |||
<div class="name">语音</div> | |||
<div class="code-name">#iconRN-yuyin</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-erweima"></use> | |||
</svg> | |||
<div class="name">二维码</div> | |||
<div class="code-name">#iconRN-erweima</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-cha"></use> | |||
</svg> | |||
<div class="name">叉</div> | |||
<div class="code-name">#iconRN-cha</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-dianzan"></use> | |||
</svg> | |||
<div class="name">点赞</div> | |||
<div class="code-name">#iconRN-dianzan</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-jujue"></use> | |||
</svg> | |||
<div class="name">拒绝</div> | |||
<div class="code-name">#iconRN-jujue</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-edit"></use> | |||
</svg> | |||
<div class="name">签约费用</div> | |||
<div class="code-name">#iconRN-edit</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-private-letter"></use> | |||
</svg> | |||
<div class="name">私信</div> | |||
<div class="code-name">#iconRN-private-letter</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-shanchu"></use> | |||
</svg> | |||
<div class="name">删除</div> | |||
<div class="code-name">#iconRN-shanchu</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-tuichu"></use> | |||
</svg> | |||
<div class="name">退出</div> | |||
<div class="code-name">#iconRN-tuichu</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-recommend"></use> | |||
</svg> | |||
<div class="name">投顾推荐</div> | |||
<div class="code-name">#iconRN-recommend</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-gift-active"></use> | |||
</svg> | |||
<div class="name">活动专区</div> | |||
<div class="code-name">#iconRN-gift-active</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-juejin"></use> | |||
</svg> | |||
<div class="name">掘金</div> | |||
<div class="code-name">#iconRN-juejin</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-right"></use> | |||
</svg> | |||
<div class="name">right</div> | |||
<div class="code-name">#iconRN-right</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-id-card"></use> | |||
</svg> | |||
<div class="name">身份卡</div> | |||
<div class="code-name">#iconRN-id-card</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-git"></use> | |||
</svg> | |||
<div class="name">github</div> | |||
<div class="code-name">#iconRN-git</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-time"></use> | |||
</svg> | |||
<div class="name">成立时间</div> | |||
<div class="code-name">#iconRN-time</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-faren"></use> | |||
</svg> | |||
<div class="name">法人代表</div> | |||
<div class="code-name">#iconRN-faren</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-money"></use> | |||
</svg> | |||
<div class="name">注册资金</div> | |||
<div class="code-name">#iconRN-money</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-title-right"></use> | |||
</svg> | |||
<div class="name">标题右</div> | |||
<div class="code-name">#iconRN-title-right</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-title-left"></use> | |||
</svg> | |||
<div class="name">标题左</div> | |||
<div class="code-name">#iconRN-title-left</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#iconRN-yuque"></use> | |||
</svg> | |||
<div class="name">语雀</div> | |||
<div class="code-name">#iconRN-yuque</div> | |||
</li> | |||
</ul> | |||
<div class="article markdown"> | |||
<h2 id="symbol-">Symbol 引用</h2> | |||
<hr> | |||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> | |||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> | |||
<ul> | |||
<li>支持多色图标了,不再受单色限制。</li> | |||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> | |||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> | |||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> | |||
</ul> | |||
<p>使用步骤如下:</p> | |||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> | |||
<pre><code class="language-html"><script src="./iconfont.js"></script> | |||
</code></pre> | |||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> | |||
<pre><code class="language-html"><style> | |||
.icon { | |||
width: 1em; | |||
height: 1em; | |||
vertical-align: -0.15em; | |||
fill: currentColor; | |||
overflow: hidden; | |||
} | |||
</style> | |||
</code></pre> | |||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> | |||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> | |||
<use xlink:href="#icon-xxx"></use> | |||
</svg> | |||
</code></pre> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<script> | |||
$(document).ready(function () { | |||
$('.tab-container .content:first').show() | |||
$('#tabs li').click(function (e) { | |||
var tabContent = $('.tab-container .content') | |||
var index = $(this).index() | |||
if ($(this).hasClass('active')) { | |||
return | |||
} else { | |||
$('#tabs li').removeClass('active') | |||
$(this).addClass('active') | |||
tabContent.hide().eq(index).fadeIn() | |||
} | |||
}) | |||
}) | |||
</script> | |||
</body> | |||
</html> |
@@ -0,0 +1,101 @@ | |||
<?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="mobile" unicode="" d="M709.745736 833.610044L316.336692 833.610044c-46.366004 0-84.302011-37.936007-84.302011-84.302011l0-730.616066c0-46.366004 37.936007-84.302011 84.302011-84.302011l393.409045 0c46.366004 0 84.302011 37.936007 84.302011 84.302011L794.047748 749.308033C794.047748 795.674037 756.11174 833.610044 709.745736 833.610044zM400.638703 791.459039l224.805022 0 0-28.101012L400.638703 763.358027 400.638703 791.459039zM513.041726-9.409044999999992c-31.038924 0-56.201 25.162076-56.201 56.201s25.162076 56.201 56.201 56.201c31.038924 0 56.201-25.162076 56.201-56.201S544.080649-9.409044999999992 513.041726-9.409044999999992zM737.846748 159.194978l-449.610044 0L288.236704 721.208045l449.610044 0L737.846748 159.194978z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="kefu" unicode="" d="M515.530406 125.768681c4.366448 0 8.812713 0.267083 13.284561 0.800225 42.889833 5.14723 79.310324 35.124985 92.75452 76.437903 1.01205 3.093455-0.452301 6.40078-3.40761 7.760754-2.928702 1.359974-6.469342 0.186242-8.119935-2.586918-0.159636-0.267083-17.198707-27.79095-83.542718-36.752042-9.930163-1.333368-19.594267-2.02717-28.752858-2.02717-46.483684 0.026606-67.196425 17.548678-67.382667 17.709337-2.342348 2.080382-5.910617 2.133593-8.306176 0.106424-2.422166-2.02717-2.981914-5.547343-1.331321-8.241708C440.960037 146.17136 477.273081 125.768681 515.530406 125.768681zM872.252901 536.921855c-0.586354 0-1.118474-0.106424-1.677199-0.106424C831.705416 705.106322 683.175591 830.644503 505.09473 830.644503c-182.979428 0-334.916862-132.473127-368.595916-307.724547-32.745798-5.894244-57.665351-34.671661-57.665351-69.477374l0-139.300626c0-39.045271 31.309076-70.703295 69.965491-70.703295 21.804608 0 41.052998 10.29446 53.858652 26.110681 30.934546-81.82254 93.922113-147.803277 173.627433-182.610014 0.191358 0.415462 1.700735 3.348258 3.514033 5.685489 1.257643 1.620917 2.660596 2.952238 3.868097 2.952238 1.251503 0 2.396583-0.453325 3.381004-1.147126-18.450211 13.735839-85.086887 84.33271-99.516528 182.853561-6.336312 43.366693 26.143427 85.932138 63.975057 92.973508 60.727083 11.308557 121.134895 24.189935 181.861978 35.284621 38.603203 7.04137 64.987107 28.217668 81.120552 63.475683 3.780093 8.241708 9.238408 24.910343 11.741415 48.940642 0.665149 3.573385 3.593851 6.320962 7.348362 6.320962 2.503007 0 4.632507-1.280156 6.043646-3.120061l1.677199 1.039679c23.934109-34.751478 71.403237-111.695918 78.218456-192.827727 7.827269-92.76066 3.460822-156.289556-67.542302-221.285872-0.079818-0.079818-0.186242-0.186242-0.292666-0.267083-0.985444-1.066285-1.570775-2.453888-1.570775-3.973498 0-2.000564 1.065262-3.707438 2.609431-4.747117 0.585331-0.240477 1.171686-0.559748 1.757017-0.800225 0.478907-0.106424 0.931209-0.267083 1.411139-0.267083 0.479931 0 0.905626 0.159636 1.331321 0.267083 1.01205 0.533143 1.969864 1.147126 2.955308 1.680269 71.802326 39.552831 126.884852 105.615433 152.336524 185.066973 10.302647-15.308661 26.436092-26.323529 45.178969-30.163997-30.057573-136.713708-151.990646-222.272339-303.050084-235.261165-9.052167 22.456455-31.335682 38.405705-57.505715 38.405705-34.183544 0-61.898769-27.070542-61.898769-60.435441s27.714202-60.408835 61.898769-60.408835c27.554566 0 50.637284 17.709337 58.650795 42.032302 174.859493 14.21577 315.02993 118.150934 344.289324 279.640931 25.850761 10.80202 44.007283 36.165688 44.007283 65.769936L944.083879 465.57797C944.081833 504.970142 911.920342 536.921855 872.252901 536.921855zM807.744701 496.435769C762.140037 619.973386 643.960451 708.226383 504.935094 708.226383c-138.440026 0-256.192893-87.505983-302.224276-210.243375-2.289136 2.800789-4.978385 5.200442-7.614421 7.627724C221.160006 655.179212 349.882716 768.9023 505.09473 768.9023c154.467047 0 282.789645-112.602567 309.705668-261.131369C812.137755 504.196523 809.68796 500.462478 807.744701 496.435769zM376.292202 86.936257c-0.00307 0.001023-0.005117 0.002047-0.008186 0.00307C376.255363 86.874859 376.25434 86.866672 376.292202 86.936257z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="gou" unicode="" d="M972.4416 621.3632l-570.0608-544.2048-350.8224 334.0288 73.0624 70.0928 277.6576-264.3968L899.3792 691.2Z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="question" unicode="" d="M512 768.1c51.9 0 102.2-10.1 149.5-30.2 45.7-19.3 86.8-47 122.1-82.3s63-76.4 82.3-122.1c20-47.3 30.2-97.6 30.2-149.5s-10.1-102.2-30.2-149.5c-19.3-45.7-47-86.8-82.3-122.1s-76.4-63-122.1-82.3c-47.3-20-97.6-30.2-149.5-30.2s-102.2 10.1-149.5 30.2c-45.7 19.3-86.8 47-122.1 82.3s-63 76.4-82.3 122.1c-20 47.3-30.2 97.6-30.2 149.5s10.1 102.2 30.2 149.5c19.3 45.7 47 86.8 82.3 122.1s76.4 63 122.1 82.3c47.3 20 97.6 30.2 149.5 30.2M512 832.1c-247.5 0-448.1-200.6-448.1-448.1s200.6-448.1 448.1-448.1 448.1 200.6 448.1 448.1-200.6 448.1-448.1 448.1zM480 160h64v-64h-64zM476.9 209.7c-0.3 9.3-0.4 42.2-0.4 46.8 0 27.3 3.9 50.8 11.6 70.6 5.7 14.9 14.8 30 27.4 45.1 9.3 11.1 25.9 27.2 50 48.4 24 21.2 39.7 38.1 46.9 50.7s10.8 26.4 10.8 41.3c0 27-10.5 50.7-31.6 71.2-21.1 20.4-46.9 30.7-77.5 30.7-29.6 0-54.3-9.3-74.1-27.8-19.8-18.5-32.8-47.4-39-86.8l-71.4 8.5c6.4 52.7 25.5 93.1 57.3 121.1s73.7 42 125.9 42c55.3 0 99.4-15 132.3-45.1 32.9-30.1 49.4-66.5 49.4-109.2 0-24.7-5.8-47.4-17.4-68.3s-34.2-46.2-67.9-76c-22.6-20.1-37.4-34.8-44.4-44.4-6.9-9.5-12.1-20.4-15.4-32.8-3.3-12.3-5.3-58.4-5.8-86.2h-66.7v0.2z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="yuyin" unicode="" d="M530.624 219.776a182.208 182.208 0 0 0-182.016 182.016V713.792A182.208 182.208 0 0 0 530.624 895.808a182.208 182.208 0 0 0 182.016-182.016v-312a182.208 182.208 0 0 0-182.016-182.016z m0 624c-71.68 0-129.984-58.304-129.984-129.984v-312c0-71.68 58.304-130.048 129.984-130.048s129.984 58.368 129.984 130.048V713.792c0 71.68-58.304 129.984-129.984 129.984zM868.608 401.792a25.984 25.984 0 0 1-51.968 0 286.336 286.336 0 0 0-286.016-286.08 286.336 286.336 0 0 0-286.016 286.08 25.984 25.984 0 0 1-51.968 0 338.496 338.496 0 0 1 312-337.024v-104.96h-78.08a25.984 25.984 0 0 1 0-52.032h208.064a25.984 25.984 0 0 1 0 51.968H556.608v104.96a338.496 338.496 0 0 1 312 337.088z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="erweima" unicode="" d="M907.328 779.264v-316.16H591.04v316.16h316.288z m-474.368 0v-316.16h-316.16v316.16h316.16z m0-474.304v-316.16h-316.16v316.16h316.16zM907.328 832H591.04a52.608 52.608 0 0 1-52.672-52.672v-316.16c0-29.12 23.552-52.672 52.672-52.672h316.16a52.608 52.608 0 0 1 52.672 52.672V779.264a52.544 52.544 0 0 1-52.48 52.736zM432.96 832h-316.16A52.8 52.8 0 0 1 64 779.264v-316.16c0-29.184 23.552-52.736 52.672-52.736h316.16a52.608 52.608 0 0 1 52.672 52.672v316.16A52.544 52.544 0 0 1 432.96 832z m487.488-474.368a39.488 39.488 0 0 1-39.488-39.552v-184.448a39.488 39.488 0 1 1 79.04 0V318.08a39.488 39.488 0 0 1-39.552 39.552z m-158.08 0a39.488 39.488 0 0 1-39.488-39.552v-342.528a39.488 39.488 0 1 1 79.04 0V318.08a39.488 39.488 0 0 1-39.552 39.552z m-158.08 0a39.488 39.488 0 0 1-39.552-39.552v-52.672a39.488 39.488 0 1 1 79.104 0V318.08a39.488 39.488 0 0 1-39.552 39.552z m-171.328 0h-316.16a52.608 52.608 0 0 1-52.672-52.672v-316.16c0-29.12 23.552-52.672 52.608-52.672h316.16a52.608 52.608 0 0 1 52.736 52.608v316.16a52.608 52.608 0 0 1-52.672 52.736z m171.328-184.512a39.488 39.488 0 0 1-39.552-39.488v-158.08a39.488 39.488 0 1 1 79.104 0v158.08a39.488 39.488 0 0 1-39.552 39.488z m316.16-131.712a39.488 39.488 0 0 1-39.488-39.488v-26.368a39.488 39.488 0 1 1 79.04 0v26.368a39.488 39.488 0 0 1-39.552 39.488z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="cha" unicode="" d="M822.848 755.456L512 444.608 201.216 755.456a42.88 42.88 0 1 1-60.672-60.672L451.392 384l-310.848-310.784a42.88 42.88 0 1 1 60.672-60.672L512 323.328l310.848-310.784a42.88 42.88 0 0 1 60.608 60.672L572.672 384l310.784 310.784a42.88 42.88 0 1 1-60.608 60.672z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="dianzan" unicode="" d="M199.808 453.184a27.84 27.84 0 0 1-27.392 28.224l-0.768-0.128-70.016 0.128a38.144 38.144 0 0 1-37.248-38.976L64-25.088c0-21.568 16.704-38.4 37.376-38.4 1.984 0 3.968-0.32 5.888 0h65.152a26.88 26.88 0 0 1 25.344 27.072 26.688 26.688 0 0 1-25.344 26.88l-53.312 0.448 1.536 434.048h51.84a27.776 27.776 0 0 1 27.328 28.224z m658.496 61.376a38.976 38.976 0 0 1-5.632 0.448l-215.104 0.704c14.08 42.176 23.744 92.352 23.744 139.52 0 30.592-3.328 60.416-9.472 89.088C640.192 794.496 597.184 832 545.6 832c-59.904 0-99.904-51.968-99.904-114.56 0-3.456-0.32-6.848 0-10.24-3.2-116.928-95.552-211.008-205.44-223.872v-59.264L239.36 184.32v-247.872h544c20.224-0.064 31.616 5.184 49.984 17.408 17.472 11.584 30.592 27.52 39.296 45.44a39.68 39.68 0 0 1 5.312 12.16l80.64 371.456c1.088 4.352 1.408 8.832 1.088 13.12a119.04 119.04 0 0 1-16.256 69.376c-20.224 33.92-49.6 47.68-85.12 49.152z m-36.032-503.04a36.864 36.864 0 0 0-13.568-16.64 33.28 33.28 0 0 0-14.08-5.312c-1.536 0.192-3.2 0-4.8 0l-499.456 0.576-0.192 439.616c93.504 43.392 162.112 85.952 197.504 187.328 3.328 9.792 6.784 22.336 9.28 35.712 5.76 31.488 5.504 62.72 5.504 62.72a48 48 0 0 0 46.464 57.152c26.496-0.896 52.608-36.288 52.608-56.448 0 0 5.888-29.76 5.952-61.696 0-40.32-4.928-61.376-4.928-61.376a356.352 356.352 0 0 0-32.384-93.824 50.048 50.048 0 0 1-3.52-17.536c0-21.504 20.032-23.488 40.64-23.488l249.984-0.32 15.36-0.448c12.736 0.576 25.408-5.76 32.64-17.856a39.04 39.04 0 0 0 3.584-31.232l-86.592-396.928z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="jujue" unicode="" d="M512 832a448 448 0 1 1 0-896A448 448 0 0 1 512 832z m0-832c-211.712 0-384 172.16-384 384 0 211.712 172.288 384 384 384s384-172.288 384-384-172.288-384-384-384z m45.248 384l113.152 113.152a32 32 0 0 1-45.248 45.248L512 429.248 398.848 542.4a32 32 0 0 1-45.248-45.248L466.752 384 353.6 270.848a32 32 0 0 1 45.248-45.248L512 338.752l113.152-113.152a32 32 0 0 1 45.248 45.248L557.248 384z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="edit" unicode="" d="M778.88-63.67999999999995H157.44c-51.456 0-93.44 41.728-93.44 92.992V648.3199999999999c0 51.328 41.984 93.056 93.44 93.056h376.32a22.848 22.848 0 1 0 0-45.504H157.44a47.616 47.616 0 0 1-47.616-47.552v-618.88c0-26.24 21.376-47.552 47.616-47.552h621.44c26.24 0 47.616 21.312 47.616 47.488V404.16a22.848 22.848 0 0 0 45.76 0v-374.848c0-51.264-41.92-92.992-93.44-92.992zM581.12 382.528a11.392 11.392 0 0 0-8.128 19.456l281.28 280.256c4.48 4.48 11.712 4.48 16.192 0s4.48-11.712 0-16.128L589.12 385.92a11.392 11.392 0 0 0-8.064-3.392z m-64.896-63.232a11.392 11.392 0 0 0-8.128 19.456l18.88 18.816c4.48 4.48 11.712 4.48 16.192 0s4.48-11.712 0-16.128l-18.88-18.816a11.392 11.392 0 0 0-8.064-3.328zM952.832 715.008L855.296 812.16a65.92 65.92 0 0 1-92.928 0L323.584 375.03999999999996l-46.528-203.776-13.248-13.248a22.72 22.72 0 0 1 16.128-38.912 22.848 22.848 0 0 1 16.192 6.72l13.312 13.248 204.608 46.336 438.784 437.056c25.6 25.472 25.6 67.008 0 92.544zM328.256 190.08000000000004l34.368 150.528 116.736-116.288-151.04-34.24z m592.192 464.64l-420.48-418.816-125.696 125.312 420.48 418.752a20.096 20.096 0 0 0 28.16 0l97.536-97.088a19.84 19.84 0 0 0 0-28.16z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="private-letter" unicode="" d="M873.024 764.672h-723.456c-79.040 0-143.36-65.664-143.36-146.432v-441.6c0-80.704 64.32-146.432 143.36-146.432h723.392c79.040 0 143.36 65.728 143.36 146.496v441.536c0 80.768-64.32 146.432-143.36 146.432zM975.616 176.704c0-57.856-46.016-104.832-102.592-104.832h-723.456c-56.576 0-102.592 46.976-102.592 104.832v441.536c0 57.792 46.080 104.832 102.592 104.832h723.392c56.576 0 102.592-47.040 102.592-104.832v-441.6zM900.288 611.008l-388.864-190.4-375.872 190.272c-2.632 1.348-5.742 2.139-9.037 2.139-8.005 0-14.92-4.666-18.175-11.426-1.394-2.814-2.179-5.987-2.179-9.343 0-8.079 4.551-15.096 11.228-18.627l393.715-199.351 406.784 199.168c6.945 3.52 11.623 10.606 11.623 18.785 0 3.267-0.746 6.359-2.077 9.116-3.193 6.912-10.189 11.708-18.306 11.708-3.217 0-6.259-0.754-8.957-2.094z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="shanchu" unicode="" d="M994.176 698.688h-320.128v36.352c0 48.96-45.056 96.96-96 96.96H439.232c-51.008 0-88.32-48-88.32-96.96v-36.352H23.04c-12.8 0-23.104-10.24-23.104-22.4 0-12.288 10.368-22.464 23.104-22.464H142.72v-584.768c0-85.76 68.672-147.264 157.888-147.264H716.8c89.216 0 165.568 61.568 165.568 147.2V653.888h111.872c12.8 0 23.104 10.176 23.104 22.4a22.848 22.848 0 0 1-23.04 22.4z m-596.48 36.352c0 24.512 16.128 52.096 41.6 52.096H577.92c25.536 0 50.688-27.584 50.688-52.096v-36.352h-231.04v36.352z m439.232-665.984c0-61.184-56.448-102.4-120.192-102.4H300.544c-63.744 0-111.168 41.216-111.168 102.4V653.824h647.552v-584.768zM528.384 529.664v-423.808c0-13.76 10.688-24.96 24.448-24.96a24.512 24.512 0 0 1 24.448 24.96V529.664a24.512 24.512 0 0 1-24.448 24.96 24.512 24.512 0 0 1-24.448-24.96zM353.408 504.768a25.152 25.152 0 0 1-25.152-24.96v-324.096a25.152 25.152 0 0 1 50.368 0V479.808a25.152 25.152 0 0 1-25.216 24.96zM702.592 479.808v-324.096a25.152 25.152 0 0 1 50.368 0V479.808a25.152 25.152 0 0 1-50.368 0z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="tuichu" unicode="" d="M325.696-30.272a425.856 425.856 0 0 0-136.192 91.84A428.032 428.032 0 0 0 64 364.8c0 69.312 16.96 138.048 49.024 199.04a433.6 433.6 0 0 0 130.304 149.44 33.472 33.472 0 1 0 39.04-54.464A366.592 366.592 0 0 1 172.416 532.48a356.288 356.288 0 0 1-41.344-167.68c0-96.64 37.632-187.52 105.92-255.872a358.784 358.784 0 0 1 255.552-105.984 359.04 359.04 0 0 1 255.552 105.984A359.424 359.424 0 0 1 853.888 364.8c0 59.2-13.824 115.712-41.344 167.744a366.208 366.208 0 0 1-110.08 126.208 33.472 33.472 0 1 0 39.04 54.4 428.288 428.288 0 0 0 145.728-515.392 427.456 427.456 0 0 0-91.776-136.32A426.816 426.816 0 0 0 492.48-64c-57.856 0-113.984 11.328-166.784 33.728z m143.36 465.088V832h67.008v-397.184a33.536 33.536 0 0 0-67.008 0z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="recommend" unicode="" d="M477.12 574.208c17.216 0 32-12.8 36.096-31.232l2.496-10.56c2.688-15.68 4.032-31.552 4.096-47.488 0-38.976-3.712-69.056-11.392-91.84l-20.032-59.776 63.040-0.256c60.8-0.256 153.216-0.64 162.112-0.832 16-0.64 22.208-6.144 27.648-15.232 3.936-6.572 6.264-14.499 6.264-22.97 0-0.79-0.020-1.575-0.060-2.356-4.156-25.491-55.164-255.443-63.676-290.131-4.43-7.654-11.088-13.594-19.080-17.019-1.912-2.053-2.488-2.053-6.328-2.053h-369.024l0.512 334.72c89.746 28.778 154.056 110.32 156.708 207.26l-0.036 1.444-0.064 1.6v1.024l0.064 3.84c0 20.16 9.6 41.856 30.72 41.856zM171.2 306.816v-324.48h-61.12v324.48h61.184zM477.12 619.712c-45.696 0-76.16-39.68-76.16-87.296 0-2.688-0.256-5.248 0-7.872-2.432-89.152-72.832-160.832-156.608-170.688l-0.64-416.896h414.848c15.296 0 23.936 4.032 37.888 13.248 13.312 8.832 23.36 20.992 29.888 34.688 1.792 2.752 64.768 285.696 66.368 302.464 0.157 2.005 0.247 4.341 0.247 6.698 0 17.026-4.682 32.959-12.829 46.58-15.194 25.442-37.53 35.938-64.666 37.090-1.408 0.192-163.84 0.896-163.84 0.896 10.752 32.064 13.696 70.4 13.696 106.304-0.017 24.13-2.665 47.632-7.673 70.246l0.057-2.342c-8.448 38.336-41.28 66.88-80.576 66.88zM184.704 352.32h-88.192c-17.728 0-32-14.784-32-33.024v-349.568c0-18.176 14.272-32.96 32-32.96h88.192c17.728 0 32 14.72 32 32.96v349.632c0.003 0.153 0.004 0.335 0.004 0.516 0 17.777-14.268 32.222-31.977 32.508zM256.704-63.040h-4.8c0-0.128 0.448-0.192 0.96-0.256-0.384-0.192-0.32-0.256 0-0.256l1.408 0.064h1.472c0.384 0 0.448 0 0 0.192 0.32 0 0.64 0.128 0.96 0.256zM911.424 711.872c-1.537 4.62-5.388 8.073-10.143 9.019l-92.257 22.341-50.176 81.408c-2.41 3.843-6.623 6.36-11.424 6.36s-9.014-2.517-11.391-6.304l-50.145-81.464-92.864-22.464c-5.924-1.488-10.241-6.767-10.241-13.054 0-3.33 1.211-6.377 3.217-8.725l61.873-72.813-7.296-95.296c-0.024-0.3-0.037-0.65-0.037-1.003 0-7.423 6.017-13.44 13.44-13.44 1.837 0 3.587 0.368 5.182 1.035l88.231 36.383 88.448-36.416c1.506-0.634 3.257-1.003 5.093-1.003 7.423 0 13.44 6.017 13.44 13.44 0 0.353-0.014 0.702-0.040 1.048l-7.293 95.314 61.888 72.768c1.989 2.329 3.199 5.375 3.199 8.704 0 1.463-0.234 2.872-0.666 4.191z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="gift-active" unicode="" d="M43.543441-28.292944000000034V-98.90277600000002c0-15.444568 12.458049-27.945281 27.859952-27.945281h402.412047V401.211093H43.543441v-429.504037z m839.723697-98.555113h65.490086c15.359238 0 27.859952 12.500714 27.859952 27.945281v9.684853c0.810626 3.626487 1.279937 7.423632 1.279937 11.348771V401.211093H547.582449v-528.05915h335.642024zM93.375637 682.583809H27.885551A27.902616 27.902616 0 0 1 0.025599 654.595863v-215.242661h470.59V675.160177c17.321808 1.706582 32.638382 3.711816 45.139095 5.418398 0.383981 0 0.725297 0.341316 0.767962 0.383981h1.663917v0.426645h-2.047898 2.047898v-0.426645c9.642189-1.621253 20.990959-2.986519 32.681046-4.138462v-237.470892h470.59V578.0983229999999a28.158604 28.158604 0 0 1 0.597304 5.973037V654.5531980000001A27.902616 27.902616 0 0 1 994.194971 682.626473h-65.490086a28.03061 28.03061 0 0 1-4.095797-0.298652h-166.519743c56.06122 12.543378 100.048373 38.52609 107.258682 86.267723 8.53291 54.439967-57.213163 136.953209-136.697223 126.500394-95.141949-13.012688-164.89849-95.568595-214.090718-159.565421C465.75184 798.247407 402.053665 871.545106 310.879519 892.877381 222.563898 913.441695 162.150893 823.376828 163.729482 767.699588c1.578588-47.314987 44.797779-72.913718 102.394923-85.457096h-168.524978A27.902616 27.902616 0 0 1 93.375637 682.626473zM708.897117 844.325122C772.680621 875.299586 831.899018 791.549072 801.692516 751.316401c-23.380174-30.547819-97.147183-33.449008-137.081203-35.155591-32.681046-1.621253-65.788738-0.853291-98.384455 2.133228 37.886121 47.784297 81.830609 96.293892 142.712924 126.073749zM227.427657 750.889755c-16.084536 17.577795-5.205075 41.469944 4.863759 59.474384 18.55908 31.827755 44.328469 51.154797 88.315621 33.107692 61.266296-25.172085 106.448055-78.417445 143.139569-126.073749-77.862806-8.404917-193.995714-11.775416-236.318949 33.491673z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="juejin" unicode="" d="M729.64116345 730.72306009L634.32650881 805.875l-99.5625-78.52693991-5.17887981-4.16056009 104.74137981-83.50215546 105.09051682 83.50215546-9.77586218 7.53556009z m361.21228445-291.47198236l-456.78879245-360.19396555-456.49784537 359.99030128L110.125 384.87284453l523.93965546-413.11745671 524.23060335 413.35021555-67.44181091 54.14547436z m-456.78879245-29.21120673L385.4784479 605.99353446 318.06573237 551.87715546l315.96982771-249.16810336 316.28987101 249.40086136-67.41271555 54.14547436-248.84806008-196.21551682z" horiz-adv-x="1272" /> | |||
<glyph glyph-name="right" unicode="" d="M765.7 409.2L314.9 761.3c-5.3 4.1-12.9 0.4-12.9-6.3v-77.3c0-4.9 2.3-9.6 6.1-12.6l360-281.1-360-281.1c-3.9-3-6.1-7.7-6.1-12.6V13c0-6.7 7.7-10.4 12.9-6.3l450.8 352.1c16.4 12.8 16.4 37.6 0 50.4z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="id-card" unicode="" d="M120.470588 896h1204.705883a120.470588 120.470588 0 0 0 120.470588-120.470588v-783.058824a120.470588 120.470588 0 0 0-120.470588-120.470588H120.470588a120.470588 120.470588 0 0 0-120.470588 120.470588V775.529412a120.470588 120.470588 0 0 0 120.470588 120.470588z m25.178353-772.457412h542.117647v18.552471c-9.336471 18.552471-28.069647 46.381176-46.742588 55.717647-37.345882 27.828706-102.821647 55.657412-140.227765 64.933647-9.336471 9.276235-37.345882 27.888941-9.33647 64.993882 37.345882 27.828706 56.079059 83.546353 65.415529 111.435294 9.336471 27.768471 9.336471 83.486118-9.33647 120.591059-18.672941 37.165176-28.009412 55.717647-65.41553 65.054118a177.091765 177.091765 0 0 1-74.752 18.492235c-28.069647 0-56.079059-9.276235-84.148706-27.828706-74.752-55.717647-46.742588-194.921412-46.742588-194.921411s37.345882-74.270118 56.079059-92.822589c18.672941-18.552471 18.672941-46.381176 0-55.717647-18.672941-18.552471-74.752-37.104941-84.088471-37.104941-18.672941-9.276235-74.812235-55.717647-84.148706-64.993882 0 0-9.336471-18.552471-18.672941-27.828706v-18.552471zM813.176471 655.058824a30.117647 30.117647 0 1 1 0-60.235295h421.647058a30.117647 30.117647 0 1 1 0 60.235295h-421.647058z m120.470588-240.941177a30.117647 30.117647 0 1 1 0-60.235294h301.17647a30.117647 30.117647 0 1 1 0 60.235294h-301.17647z m60.235294-240.941176a30.117647 30.117647 0 1 1 0-60.235295h240.941176a30.117647 30.117647 0 1 1 0 60.235295h-240.941176z" horiz-adv-x="1445" /> | |||
<glyph glyph-name="git" unicode="" d="M0 375.114c0 69.368 13.51 135.697 40.498 199.02 26.987 63.323 63.322 117.826 109.006 163.51 45.65 45.65 100.154 81.985 163.51 109.006A502.289 502.289 0 0 0 512 887.08c69.335 0 135.663-13.477 198.986-40.497 63.356-26.988 117.86-63.323 163.51-109.007 45.684-45.65 82.02-100.154 109.006-163.51A502.289 502.289 0 0 0 1024 375.148c0-111.318-32.504-211.472-97.511-300.494-64.975-88.989-148.48-150.825-250.484-185.476-5.351 0-9.348 0.99-11.99 2.973-2.676 1.982-4.196 3.997-4.526 6.012a59.458 59.458 0 0 0-0.495 8.984 7.663 7.663 0 0 0-0.991 3.006v128.99c0 40.63-14.336 75.314-43.008 103.986 76.667 13.345 134.011 41.819 171.999 85.487 37.987 43.669 57.013 96.52 57.013 158.522 0 58.005-18.663 108.346-56.022 150.99 13.345 42.678 11 87.668-6.97 135.003-18.697 1.322-39.011-1.85-61.01-9.513-22-7.663-38.318-14.831-49.02-21.47-10.637-6.673-20.316-13.016-28.97-19.027-38.68 10.669-81.854 16.02-129.486 16.02-47.7 0-90.509-5.351-128.529-16.02-7.333 5.35-15.855 11.164-25.5 17.507-9.68 6.342-26.493 14.005-50.507 22.99-23.982 9.018-45.65 12.85-65.008 11.495-18.663-47.996-20.645-93.646-5.979-136.984-36.665-42.678-54.998-92.986-54.998-150.99 0-62.002 18.663-114.689 55.99-157.994 37.326-43.339 94.67-72.01 171.998-86.016a142.303 142.303 0 0 1-39.969-70.029c-56.683-13.972-96.355-3.963-119.015 30.06-42.017 61.308-79.674 83.307-113.003 65.965-4.69-4.657-3.997-9.48 1.982-14.501 6.012-4.988 14.996-11.66 27.02-19.985 11.99-8.357 20.976-17.507 26.987-27.515 0.661-1.322 2.51-6.177 5.517-14.502a831.917 831.917 0 0 1 8.985-23.981c2.973-7.663 8.654-16.186 17.011-25.5 8.324-9.349 18.003-17.178 29.003-23.52 11-6.309 26.161-11 45.485-14.006 19.324-2.972 41.323-3.138 65.998-0.495v-100.484c0-0.991-0.165-2.643-0.495-5.021-0.33-2.312-0.991-3.964-1.982-4.955-0.991-1.024-2.345-2.015-4.03-3.039a12.52 12.52 0 0 0-6.474-1.486c-2.676 0-6.012 0.33-10.009 0.99-101.343 35.345-183.825 97.182-247.51 185.51C31.842 164.963 0 264.423 0 375.08z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="time" unicode="" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM756.809143 265.28914299999997a58.294857 58.294857 0 1 0-53.248-103.643429L470.528 281.38057100000003A58.294857 58.294857 0 0 0 438.857143 333.23885700000005V545.133714a58.294857 58.294857 0 1 0 116.516571 0v-176.347428l201.435429-103.497143z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="faren" unicode="" d="M512 369.37142900000003A263.314286 263.314286 0 1 0 512 896a263.314286 263.314286 0 0 0 0-526.628571z m0-479.012572c-242.395429 0-438.857143-17.554286-438.857143 127.926857 0 145.408 196.461714 263.314286 438.857143 263.314286s438.857143-117.906286 438.857143-263.314286-196.461714-127.926857-438.857143-127.926857z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="money" unicode="" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM566.857143 402.285714v-54.857143h109.714286a54.857143 54.857143 0 0 0 0-109.714285h-109.714286v-109.714286a54.857143 54.857143 0 0 0-109.714286 0V237.71428600000002h-109.714286a54.857143 54.857143 0 0 0 0 109.714285h109.714286v54.857143h-109.714286a54.857143 54.857143 0 0 0 0 109.714286h72.265143L311.588571 602.404571a52.077714 52.077714 0 0 0-5.851428 74.752 55.369143 55.369143 0 0 0 76.726857 5.705143l123.977143-103.643428 123.977143 103.643428a55.369143 55.369143 0 0 0 76.726857-5.705143 52.077714 52.077714 0 0 0-5.851429-74.752L592.969143 512H676.571429a54.857143 54.857143 0 1 0 0-109.714286h-109.714286z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="title-right" unicode="" d="M748.307692 68.92307700000003H39.384615a39.384615 39.384615 0 0 0 0 78.769231h708.923077a39.384615 39.384615 0 1 0 0-78.769231z m0 551.384615H39.384615a39.384615 39.384615 0 0 0 0 78.769231h708.923077a39.384615 39.384615 0 0 0 0-78.769231z m236.307693-275.692307H275.692308a39.384615 39.384615 0 0 0 0 78.76923h708.923077a39.384615 39.384615 0 0 0 0-78.76923z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="title-left" unicode="" d="M275.692308 699.076923h708.923077a39.384615 39.384615 0 0 0 0-78.769231H275.692308a39.384615 39.384615 0 1 0 0 78.769231z m0-551.384615h708.923077a39.384615 39.384615 0 0 0 0-78.769231H275.692308a39.384615 39.384615 0 0 0 0 78.769231z m-236.307693 275.692307h708.923077a39.384615 39.384615 0 0 0 0-78.76923H39.384615a39.384615 39.384615 0 0 0 0 78.76923z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="yuque" unicode="" d="M81.70790608 97.98699266000006l31.73503614 36.10953985L429.28211134 493.4951539c5.77964735 6.62803595 25.21304876 28.63311531 28.20892101 32.079694 10.68439395 12.11604972 18.74408567 21.47483648 26.24702236 30.48896538 27.70519027 33.08715547 46.39625165 59.8644207 60.15605428 87.59612313 14.63470338 43.32084298 3.10192082 78.21082421-24.65629373 107.3741824a49.92236678 49.92236678 0 0 0 34.54532337 84.30861729c4.82521018 0.185585 7.74154598 0.26512144 9.41181106 0.26512143h6.15081736c66.01523807 0 108.27559529-0.87490075 165.83345948-4.82521018 62.99285367-4.2949673 111.72217398-27.67867813 146.61215522-64.05333941 14.31655765-14.92633697 24.65629374-29.95872251 31.81457258-43.61247656l12.99095046-0.68931574c1.98841078-0.10604857 9.46483534 0.21209715 20.73249644 1.06048575a50.0549275 50.0549275 0 0 0 23.595808-95.84139984c-33.53786192-14.52865481-57.13366989-52.14938687-52.6531176-69.9655475 1.48468005-5.93872021 3.65867585-11.85092828 7.13176668-19.53944999 1.67026506-3.71170014 9.57088391-20.17574144 11.74487971-24.92141516 16.83521132-36.93141631 25.71677949-72.56373759 27.59914169-125.5880252 5.88569593-163.50039084-136.27241915-307.56738026-303.85568012-307.56738024-7.05223026 0-16.30496844-0.05302429-27.73170242-0.13256073a543.8966301 543.8966301 0 0 0-57.16018202-41.06731074c-132.87886474-82.85044939-300.80678358-110.44959108-499.11761925-65.19336162l-1.61724076 0.39768215a52.49404473 52.49404473 0 0 0-27.51960526 85.89934592c8.37783744 9.46483534 19.45991356 21.87251863 33.93554407 38.04492636z m76.32846202-24.15256301l-32.26527901-35.89744271c145.65771805-27.41355669 269.73455104-10.63136967 372.01840182 40.56358003-83.93744727-1.03397361-197.22383775-2.59819009-339.75312281-4.66613732z m553.38797757 84.99793304c103.66248226 24.36466016 184.25939943 120.89537573 180.46816287 226.14858663-1.56421649 43.16177011-8.08620386 69.46181677-21.07715432 97.96237135-1.74980149 3.8177487-9.75646892 20.49388716-11.87744042 25.18653662a183.62310798 183.62310798 0 0 0-11.40022183 31.81457257c-9.06715318 36.16256415 6.44245094 78.74106709 35.84441841 111.74868611l-22.42927365 1.19304647-7.15827883 25.00095161a71.4237154 71.4237154 0 0 1-4.45404016 10.18066322 118.88045281 118.88045281 0 0 1-20.14922928 28.15589672c-22.53532223 23.46324726-54.34989479 38.7342421-98.96983281 41.80965078a1917.75592195 1917.75592195 0 0 1-129.06111604 4.56008872c23.64883228-41.25289575 30.22384394-90.30036178 10.79044252-145.18049945l-1.59072862-3.81774871a416.10809698 416.10809698 0 0 0-35.95046699-59.81139641c40.03333714 0.95443717 83.91093514-9.99507821 128.71645815-37.01095276 71.13208182-42.89664867 107.71884027-132.98491331 67.4203817-255.07333553-10.52532109-31.89410899-30.96618396-67.63247884-59.1220807-102.86711794z m-105.59786875-6.23035379c48.41117458 44.08969514 82.77091295 93.4553069 95.47022983 131.92442756 29.32243104 88.86870602 6.94618167 144.04047728-35.79139413 169.81028104-43.05572153 25.95538878-82.08159722 31.07223254-117.89950349 21.05064219-25.13351233-7.05223026-47.19161597-21.60739721-58.8304471-34.65137196a41176.14310034 41176.14310034 0 0 0-138.73804852-154.30067692l-2.5451658-2.83679939-122.77773795-135.87473699c181.58167291 2.59819009 308.54832958 4.24194301 381.11206716 4.87823447zM605.24320975 150.69313453999996c-69.30274389-0.55675502-206.42355165-2.33306865-411.38893538-5.30242876l105.91601449 119.54325641c57.5048399 61.66724647 119.30464711 127.81504527 170.23447535 182.05889148 19.03571924 20.25527787 94.33020765 75.29448841 195.792182 17.15335704 29.95872251-17.15335703 82.82393724-69.75345035 45.38879017-177.55182704-10.94951539-31.54945113-45.09715661-86.53563737-105.94252663-135.87473698z" horiz-adv-x="1024" /> | |||
</font> | |||
</defs></svg> |
@@ -0,0 +1,91 @@ | |||
/*! minireset.css v0.0.5 | MIT License | github.com/jgthms/minireset.css */ | |||
html, | |||
body, | |||
p, | |||
ol, | |||
ul, | |||
li, | |||
dl, | |||
dt, | |||
dd, | |||
blockquote, | |||
figure, | |||
fieldset, | |||
legend, | |||
textarea, | |||
pre, | |||
iframe, | |||
hr, | |||
h1, | |||
h2, | |||
h3, | |||
h4, | |||
h5, | |||
h6 { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
h1, | |||
h2, | |||
h3, | |||
h4, | |||
h5, | |||
h6 { | |||
font-size: 100%; | |||
font-weight: normal; | |||
} | |||
ul { | |||
list-style: none; | |||
} | |||
button, | |||
input, | |||
select, | |||
textarea { | |||
margin: 0; | |||
} | |||
html { | |||
box-sizing: border-box; | |||
} | |||
*, *:before, *:after { | |||
box-sizing: inherit; | |||
} | |||
img, | |||
video { | |||
height: auto; | |||
max-width: 100%; | |||
} | |||
iframe { | |||
border: 0; | |||
} | |||
table { | |||
border-collapse: collapse; | |||
border-spacing: 0; | |||
} | |||
td, | |||
th { | |||
padding: 0; | |||
text-align: left; | |||
} | |||
a { | |||
text-decoration: none; | |||
} | |||
a:active { | |||
outline: 0; | |||
text-decoration: none; | |||
} | |||
button, | |||
input { | |||
outline: none; | |||
border: none; | |||
} |
@@ -0,0 +1,349 @@ | |||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ | |||
/* Document | |||
========================================================================== */ | |||
/** | |||
* 1. Correct the line height in all browsers. | |||
* 2. Prevent adjustments of font size after orientation changes in iOS. | |||
*/ | |||
html { | |||
line-height: 1.15; /* 1 */ | |||
-webkit-text-size-adjust: 100%; /* 2 */ | |||
} | |||
/* Sections | |||
========================================================================== */ | |||
/** | |||
* Remove the margin in all browsers. | |||
*/ | |||
body { | |||
margin: 0; | |||
} | |||
/** | |||
* Render the `main` element consistently in IE. | |||
*/ | |||
main { | |||
display: block; | |||
} | |||
/** | |||
* Correct the font size and margin on `h1` elements within `section` and | |||
* `article` contexts in Chrome, Firefox, and Safari. | |||
*/ | |||
h1 { | |||
font-size: 2em; | |||
margin: 0.67em 0; | |||
} | |||
/* Grouping content | |||
========================================================================== */ | |||
/** | |||
* 1. Add the correct box sizing in Firefox. | |||
* 2. Show the overflow in Edge and IE. | |||
*/ | |||
hr { | |||
box-sizing: content-box; /* 1 */ | |||
height: 0; /* 1 */ | |||
overflow: visible; /* 2 */ | |||
} | |||
/** | |||
* 1. Correct the inheritance and scaling of font size in all browsers. | |||
* 2. Correct the odd `em` font sizing in all browsers. | |||
*/ | |||
pre { | |||
font-family: monospace, monospace; /* 1 */ | |||
font-size: 1em; /* 2 */ | |||
} | |||
/* Text-level semantics | |||
========================================================================== */ | |||
/** | |||
* Remove the gray background on active links in IE 10. | |||
*/ | |||
a { | |||
background-color: transparent; | |||
} | |||
/** | |||
* 1. Remove the bottom border in Chrome 57- | |||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | |||
*/ | |||
abbr[title] { | |||
border-bottom: none; /* 1 */ | |||
text-decoration: underline; /* 2 */ | |||
text-decoration: underline dotted; /* 2 */ | |||
} | |||
/** | |||
* Add the correct font weight in Chrome, Edge, and Safari. | |||
*/ | |||
b, | |||
strong { | |||
font-weight: bolder; | |||
} | |||
/** | |||
* 1. Correct the inheritance and scaling of font size in all browsers. | |||
* 2. Correct the odd `em` font sizing in all browsers. | |||
*/ | |||
code, | |||
kbd, | |||
samp { | |||
font-family: monospace, monospace; /* 1 */ | |||
font-size: 1em; /* 2 */ | |||
} | |||
/** | |||
* Add the correct font size in all browsers. | |||
*/ | |||
small { | |||
font-size: 80%; | |||
} | |||
/** | |||
* Prevent `sub` and `sup` elements from affecting the line height in | |||
* all browsers. | |||
*/ | |||
sub, | |||
sup { | |||
font-size: 75%; | |||
line-height: 0; | |||
position: relative; | |||
vertical-align: baseline; | |||
} | |||
sub { | |||
bottom: -0.25em; | |||
} | |||
sup { | |||
top: -0.5em; | |||
} | |||
/* Embedded content | |||
========================================================================== */ | |||
/** | |||
* Remove the border on images inside links in IE 10. | |||
*/ | |||
img { | |||
border-style: none; | |||
} | |||
/* Forms | |||
========================================================================== */ | |||
/** | |||
* 1. Change the font styles in all browsers. | |||
* 2. Remove the margin in Firefox and Safari. | |||
*/ | |||
button, | |||
input, | |||
optgroup, | |||
select, | |||
textarea { | |||
font-family: inherit; /* 1 */ | |||
font-size: 100%; /* 1 */ | |||
line-height: 1.15; /* 1 */ | |||
margin: 0; /* 2 */ | |||
} | |||
/** | |||
* Show the overflow in IE. | |||
* 1. Show the overflow in Edge. | |||
*/ | |||
button, | |||
input { /* 1 */ | |||
overflow: visible; | |||
} | |||
/** | |||
* Remove the inheritance of text transform in Edge, Firefox, and IE. | |||
* 1. Remove the inheritance of text transform in Firefox. | |||
*/ | |||
button, | |||
select { /* 1 */ | |||
text-transform: none; | |||
} | |||
/** | |||
* Correct the inability to style clickable types in iOS and Safari. | |||
*/ | |||
button, | |||
[type="button"], | |||
[type="reset"], | |||
[type="submit"] { | |||
-webkit-appearance: button; | |||
} | |||
/** | |||
* Remove the inner border and padding in Firefox. | |||
*/ | |||
button::-moz-focus-inner, | |||
[type="button"]::-moz-focus-inner, | |||
[type="reset"]::-moz-focus-inner, | |||
[type="submit"]::-moz-focus-inner { | |||
border-style: none; | |||
padding: 0; | |||
} | |||
/** | |||
* Restore the focus styles unset by the previous rule. | |||
*/ | |||
button:-moz-focusring, | |||
[type="button"]:-moz-focusring, | |||
[type="reset"]:-moz-focusring, | |||
[type="submit"]:-moz-focusring { | |||
outline: 1px dotted ButtonText; | |||
} | |||
/** | |||
* Correct the padding in Firefox. | |||
*/ | |||
fieldset { | |||
padding: 0.35em 0.75em 0.625em; | |||
} | |||
/** | |||
* 1. Correct the text wrapping in Edge and IE. | |||
* 2. Correct the color inheritance from `fieldset` elements in IE. | |||
* 3. Remove the padding so developers are not caught out when they zero out | |||
* `fieldset` elements in all browsers. | |||
*/ | |||
legend { | |||
box-sizing: border-box; /* 1 */ | |||
color: inherit; /* 2 */ | |||
display: table; /* 1 */ | |||
max-width: 100%; /* 1 */ | |||
padding: 0; /* 3 */ | |||
white-space: normal; /* 1 */ | |||
} | |||
/** | |||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. | |||
*/ | |||
progress { | |||
vertical-align: baseline; | |||
} | |||
/** | |||
* Remove the default vertical scrollbar in IE 10+. | |||
*/ | |||
textarea { | |||
overflow: auto; | |||
} | |||
/** | |||
* 1. Add the correct box sizing in IE 10. | |||
* 2. Remove the padding in IE 10. | |||
*/ | |||
[type="checkbox"], | |||
[type="radio"] { | |||
box-sizing: border-box; /* 1 */ | |||
padding: 0; /* 2 */ | |||
} | |||
/** | |||
* Correct the cursor style of increment and decrement buttons in Chrome. | |||
*/ | |||
[type="number"]::-webkit-inner-spin-button, | |||
[type="number"]::-webkit-outer-spin-button { | |||
height: auto; | |||
} | |||
/** | |||
* 1. Correct the odd appearance in Chrome and Safari. | |||
* 2. Correct the outline style in Safari. | |||
*/ | |||
[type="search"] { | |||
-webkit-appearance: textfield; /* 1 */ | |||
outline-offset: -2px; /* 2 */ | |||
} | |||
/** | |||
* Remove the inner padding in Chrome and Safari on macOS. | |||
*/ | |||
[type="search"]::-webkit-search-decoration { | |||
-webkit-appearance: none; | |||
} | |||
/** | |||
* 1. Correct the inability to style clickable types in iOS and Safari. | |||
* 2. Change font properties to `inherit` in Safari. | |||
*/ | |||
::-webkit-file-upload-button { | |||
-webkit-appearance: button; /* 1 */ | |||
font: inherit; /* 2 */ | |||
} | |||
/* Interactive | |||
========================================================================== */ | |||
/* | |||
* Add the correct display in Edge, IE 10+, and Firefox. | |||
*/ | |||
details { | |||
display: block; | |||
} | |||
/* | |||
* Add the correct display in all browsers. | |||
*/ | |||
summary { | |||
display: list-item; | |||
} | |||
/* Misc | |||
========================================================================== */ | |||
/** | |||
* Add the correct display in IE 10+. | |||
*/ | |||
template { | |||
display: none; | |||
} | |||
/** | |||
* Add the correct display in IE 10. | |||
*/ | |||
[hidden] { | |||
display: none; | |||
} |
@@ -0,0 +1,162 @@ | |||
<!--基础组件之-tip提示框--> | |||
<template> | |||
<transition :name="`tip-${position}`"> | |||
<div class="rn-tip" :class="`rn-tip-${position}`" v-show="value" @click="hide(true)"> | |||
<slot> | |||
<div class="default-tip-title" :class="`default-tip-${type}`"> | |||
<span class="default-text">{{text}}</span> | |||
</div> | |||
</slot> | |||
</div> | |||
</transition> | |||
</template> | |||
<script type="text/ecmascript-6"> | |||
/** | |||
* tip提示 控件 | |||
* @props 参数 text: slot未设置时,显示的文本信息 | |||
* @props 参数 delay: 多久之后自动关闭tip提示框 | |||
* @props 参数 position: tip弹出框的显示位置 | |||
* @props 参数 type: 提示信息的tip属性(成功、失败、警告)。 当然也可以自己外部设置class样式 | |||
* @Events 事件 on-hide: tip弹框消失触发的事件 | |||
* @Slots 插值 默认:tip框的具体内容 | |||
*/ | |||
export default { | |||
props: { | |||
value: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
text: { | |||
type: String, | |||
default: '这是提示' | |||
}, | |||
delay: { | |||
type: Number, | |||
default: 2000 | |||
}, | |||
position: { | |||
type: String, | |||
default: 'top', | |||
validator: function(value) { | |||
return value === 'top' || value === 'bottom'; | |||
} | |||
}, | |||
type: { | |||
type: String, | |||
default: 'info' | |||
} | |||
}, | |||
data() { | |||
return { | |||
showTip: false, | |||
timer: null | |||
}; | |||
}, | |||
watch: { | |||
value(newVal) { | |||
if (newVal) { | |||
clearTimeout(this.timer); | |||
this.timer = setTimeout(() => { | |||
this.hide(false); | |||
}, this.delay); | |||
} | |||
} | |||
}, | |||
methods: { | |||
// 可外部调用 | |||
show() { | |||
// this.showTip = true; | |||
this.$emit('input', true); | |||
clearTimeout(this.timer); | |||
this.timer = setTimeout(() => { | |||
this.hide(false); | |||
}, this.delay); | |||
}, | |||
hide(closeType) { | |||
// this.showTip = false; | |||
// this.value = false; | |||
this.$emit('input', false); | |||
this.$emit('on-hide', closeType); | |||
} | |||
}, | |||
beforeDestroy() { | |||
clearTimeout(this.timer); | |||
} | |||
}; | |||
</script> | |||
<style lang="less" rel="stylesheet/less" scoped> | |||
.rn-tip { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
z-index: 500; | |||
/*background: rgba(0, 0, 0, 0.3);*/ | |||
&-top { | |||
top: 0; | |||
bottom: unset; | |||
.default-tip-title { | |||
border-bottom-right-radius: 6px; | |||
border-bottom-left-radius: 6px; | |||
} | |||
} | |||
&-bottom { | |||
top: unset; | |||
bottom: 0; | |||
.default-tip-title { | |||
border-top-right-radius: 6px; | |||
border-top-left-radius: 6px; | |||
} | |||
} | |||
} | |||
.default-tip-title { | |||
text-align: center; | |||
padding: 15px 0; | |||
background-color: #edf2fc; | |||
border-color: #e6ebf5; | |||
color: #878d99; | |||
box-shadow: 0 1px 3px -1px #dcd6d6; | |||
.default-text { | |||
font-size: 14px; | |||
} | |||
} | |||
.default-tip-info { | |||
background-color: #edf2fc; | |||
border-color: #e6ebf5; | |||
color: #878d99; | |||
} | |||
.default-tip-error { | |||
background-color: #fee; | |||
border-color: #fedddd; | |||
color: #fa5555; | |||
} | |||
.default-tip-warning { | |||
background-color: #fdf5e6; | |||
border-color: #fbeccd; | |||
color: #eb9e05; | |||
} | |||
.default-tip-success { | |||
background-color: #f0f9eb; | |||
border-color: #e1f3d8; | |||
color: #67c23a; | |||
} | |||
.tip-top-enter, | |||
.tip-top-leave-to { | |||
transform: translate3d(0, -100%, 0); | |||
} | |||
.tip-top-enter-active, | |||
.tip-top-leave-active, | |||
.tip-bottom-enter-active, | |||
.tip-bottom-leave-active { | |||
transition: all 0.5s; | |||
} | |||
.tip-bottom-enter, | |||
.tip-bottom-leave-to { | |||
transform: translate3d(0, 100%, 0); | |||
} | |||
</style> |
@@ -0,0 +1,115 @@ | |||
<!--顶部header组件--> | |||
<template> | |||
<header :class="['component-header',{'is-fixed': fixed}]"> | |||
<div class="component-header-left" @click="handleLeft"> | |||
<slot name="header-left" v-if="showLeft"> | |||
<i class="iconfont iconRN-right"></i> | |||
</slot> | |||
</div> | |||
<div class="component-header-middle"> | |||
<slot> | |||
<p class="header-title">{{mainTitle}}</p> | |||
</slot> | |||
</div> | |||
<div class="component-header-right" @click="handleRight"> | |||
<slot name="header-right" v-if="showRight"> | |||
<i class="iconfont iconRN-gift-active"></i> | |||
</slot> | |||
</div> | |||
</header> | |||
</template> | |||
<script type="text/babel"> | |||
/** | |||
* BaseHeader 顶部header组件 | |||
* @props 参数 title: 标题文本 (String 默认:'标题') | |||
* @props 参数 showLeft: 是否显示左侧返回图标(Boolean 默认:false-关闭) | |||
* @props 参数 showRight: 是否显示右侧内容(Boolean 默认:false-关闭) | |||
* @Events 事件 handle-left: 左侧点击触发 | |||
* @Events 事件 handle-right: 右侧点击触发 | |||
* @Slots 插值 header-left: header 左侧 | |||
* @Slots 插值 header-right: header 右侧 | |||
*/ | |||
export default { | |||
name: 'BaseHeader', | |||
props: { | |||
title: { | |||
type: String, | |||
default: '' | |||
}, | |||
fixed: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
showLeft: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
showRight: { | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
mainTitle() { | |||
return this.title || (this.$route.meta && this.$route.meta.title) | |||
} | |||
}, | |||
methods: { | |||
handleLeft: function() { | |||
this.$emit('handle-left'); | |||
}, | |||
handleRight: function() { | |||
this.$emit('handle-right'); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
.component-header { | |||
display: flex; | |||
height: 44px; | |||
line-height: 44px; | |||
text-align: center; | |||
background-color: #fff; | |||
font-size: 16px; | |||
color: #424242; | |||
padding: 0 10px; | |||
z-index: 1; | |||
// border-bottom: 1px solid #ecdede2e; | |||
box-shadow: 0 1px 4px -2px #696a6b; | |||
&-left { | |||
flex: 1; | |||
text-align: left; | |||
.iconRN-right { | |||
transform: rotate(180deg); | |||
} | |||
} | |||
&-middle { | |||
flex: 3; | |||
// font-size: 18px; | |||
text-align: center; | |||
} | |||
&-right { | |||
flex: 1; | |||
text-align: right; | |||
} | |||
.iconfont { | |||
font-size: 16px; | |||
} | |||
.iconRN-gift-active { | |||
color:forestgreen; | |||
} | |||
} | |||
.component-header.is-fixed { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
z-index: 2; | |||
} | |||
</style> |
@@ -0,0 +1,50 @@ | |||
<!--主按钮--> | |||
<template> | |||
<div class="common-btns"> | |||
<button class="common-btn" :disabled="btnDisabled" @click="handleNext">{{btnText}}</button> | |||
</div> | |||
</template> | |||
<script type="text/babel"> | |||
export default { | |||
name: 'MainButton', | |||
props: { | |||
btnText: { | |||
type: String, | |||
default: '确定' | |||
}, | |||
btnDisabled: { | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
methods: { | |||
handleNext() { | |||
this.$emit('handle-click'); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="less" rel="stylesheet/less" scoped> | |||
.common-btns { | |||
padding: 20px 24px; | |||
.common-btn { | |||
height: 48px; | |||
width: 300px; | |||
border: none; | |||
color: #fff; | |||
border-radius: 48px; | |||
font-size: 18px; | |||
background-image: linear-gradient(-210deg, #5ad0ff 0%, #087af7 100%); | |||
box-shadow: 0 4px 9px 0 #9dc4ec; | |||
} | |||
.common-btn[disabled] { | |||
opacity: 0.3; | |||
box-shadow: 0 4px 9px 0 #a7b2bb; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,58 @@ | |||
<template> | |||
<div class="hello"> | |||
<h1>{{ msg }}</h1> | |||
<p> | |||
For a guide and recipes on how to configure / customize this project,<br> | |||
check out the | |||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. | |||
</p> | |||
<h3>Installed CLI Plugins</h3> | |||
<ul> | |||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> | |||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> | |||
</ul> | |||
<h3>Essential Links</h3> | |||
<ul> | |||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> | |||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> | |||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> | |||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> | |||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> | |||
</ul> | |||
<h3>Ecosystem</h3> | |||
<ul> | |||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> | |||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> | |||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> | |||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> | |||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> | |||
</ul> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'HelloWorld', | |||
props: { | |||
msg: String | |||
} | |||
} | |||
</script> | |||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||
<style scoped lang="less"> | |||
h3 { | |||
margin: 40px 0 0; | |||
} | |||
ul { | |||
list-style-type: none; | |||
padding: 0; | |||
} | |||
li { | |||
display: inline-block; | |||
margin: 0 10px; | |||
} | |||
a { | |||
color: #42b983; | |||
} | |||
</style> |
@@ -0,0 +1,82 @@ | |||
// 时间显示组件 | |||
<template> | |||
<div class="module-show-time"> | |||
<span>{{timeArr[0]}}</span> | |||
<span :class="['time-str',{test1: timeArr[2] == 0}]">{{timeArr[1]}}</span> | |||
<span :class="['time-str',{test1: timeArr[3] == 0}]">{{timeArr[2]}}</span>: | |||
<span :class="['time-str',{test1: timeArr[4] == 0}]">{{timeArr[3]}}</span> | |||
<span :class="['time-str',{test1: timeArr[5] == 0}]">{{timeArr[4]}}</span>: | |||
<span :class="['time-str',{test1: timeArr[6] == 0}]">{{timeArr[5]}}</span> | |||
<span class="time-str test">{{timeArr[6]}}</span> | |||
</div> | |||
</template> | |||
<script> | |||
import { formatDate } from '@/utils/cloud-utils'; | |||
export default { | |||
data() { | |||
return { | |||
interval_timer: null, | |||
time: formatDate(Date.now(), 'yyyy年MM月dd日 hh:mm:ss') | |||
}; | |||
}, | |||
computed: { | |||
timeArr: function() { | |||
const arr = []; | |||
arr[0] = this.time.slice(0, 12); | |||
arr[1] = this.time.slice(12, 13); | |||
arr[2] = this.time.slice(13, 14); | |||
arr[3] = this.time.slice(15, 16); | |||
arr[4] = this.time.slice(16, 17); | |||
arr[5] = this.time.slice(18, 19); | |||
arr[6] = this.time.slice(19, 20); | |||
return arr; | |||
} | |||
}, | |||
created() { | |||
this.init(); | |||
}, | |||
beforeDestroy() { | |||
this.interval_timer && clearInterval(this.interval_timer); | |||
}, | |||
methods: { | |||
init() { | |||
this.interval_timer = setInterval(() => { | |||
this.time = formatDate(Date.now(), 'yyyy年MM月dd日 hh:mm:ss'); | |||
}, 1000); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="less" rel="stylesheet/less" scoped> | |||
.module-show-time { | |||
display: inline-block; | |||
color: #0076ff; | |||
.test { | |||
animation: haha 1s infinite; | |||
} | |||
.test1 { | |||
animation: haha 3s; | |||
} | |||
.time-str { | |||
border-radius: 2px; | |||
} | |||
@keyframes haha { | |||
0% { | |||
background: transparent; | |||
color: #0076ff; | |||
} | |||
50% { | |||
background: rgba(58, 207, 228, 0.3); | |||
color: red; | |||
} | |||
100% { | |||
background: transparent; | |||
color: #0076ff; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,6 @@ | |||
/* | |||
* @Author: nowThen | |||
* @Date: 2019-08-19 18:18:22 | |||
*/ | |||
// 导出所有的指令 | |||
export { transferDom } from './transferDom'; |
@@ -0,0 +1,91 @@ | |||
/* | |||
* @Author: nowThen | |||
* @Date: 2019-08-19 18:18:54 | |||
*/ | |||
// Thanks to: https://github.com/airyland/vux/blob/v2/src/directives/transfer-dom/index.js | |||
// Thanks to: https://github.com/calebroseland/vue-dom-portal | |||
/** | |||
* Get target DOM Node | |||
* @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean | |||
* @return {Node} The target that the el will be appended to | |||
*/ | |||
// iview中的组件移动挂载节点的指令 | |||
// 判断目标node是否存在,不存在则绑定到body上 | |||
function getTarget (node) { | |||
if (node === void 0) { | |||
node = document.body | |||
} | |||
if (node === true) { return document.body } | |||
return node instanceof window.Node ? node : document.querySelector(node) | |||
} | |||
const directive = { | |||
inserted (el, { value }, vnode) { | |||
// transfer属性为空,则不移动组件; | |||
if (el.dataset.transfer !== 'true') { | |||
return false | |||
} | |||
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom' | |||
const parentNode = el.parentNode | |||
if (!parentNode) return | |||
const home = document.createComment('') | |||
let hasMovedOut = false | |||
// 是否传入挂载的节点,传入则挂载到目标节点 | |||
if (value !== false) { | |||
parentNode.replaceChild(home, el) // moving out, el is no longer in the document | |||
getTarget(value).appendChild(el) // moving into new place | |||
hasMovedOut = true | |||
} | |||
if (!el.__transferDomData) { | |||
el.__transferDomData = { | |||
parentNode: parentNode, | |||
home: home, | |||
target: getTarget(value), | |||
hasMovedOut: hasMovedOut | |||
} | |||
} | |||
}, | |||
componentUpdated (el, { value }) { | |||
if (el.dataset.transfer !== 'true') return false | |||
// need to make sure children are done updating (vs. `update`) | |||
const ref$1 = el.__transferDomData | |||
if (!ref$1) return | |||
// homes.get(el) | |||
const parentNode = ref$1.parentNode | |||
const home = ref$1.home | |||
const hasMovedOut = ref$1.hasMovedOut // recall where home is | |||
if (!hasMovedOut && value) { | |||
// remove from document and leave placeholder | |||
parentNode.replaceChild(home, el) | |||
// append to target | |||
getTarget(value).appendChild(el) | |||
el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) }) | |||
} else if (hasMovedOut && value === false) { | |||
// previously moved, coming back home | |||
parentNode.replaceChild(el, home) | |||
el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) }) | |||
} else if (value) { | |||
// already moved, going somewhere else | |||
getTarget(value).appendChild(el) | |||
} | |||
}, | |||
unbind (el) { | |||
if (el.dataset.transfer !== 'true') return false | |||
el.className = el.className.replace('v-transfer-dom', '') | |||
const ref$1 = el.__transferDomData | |||
if (!ref$1) return | |||
if (el.__transferDomData.hasMovedOut === true) { | |||
el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el) | |||
} | |||
el.__transferDomData = null | |||
} | |||
} | |||
export default directive |
@@ -0,0 +1,112 @@ | |||
/** | |||
* @description: 定义过滤器模块 | |||
* @author: nowThen | |||
*/ | |||
/** | |||
* Date 转化为指定格式的String<br> | |||
* 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)可以用 1-2 个占位符<br> | |||
* 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) | |||
* | |||
* @param {string} date | |||
* @param {string} fmt | |||
* @returns {string} | |||
* @example | |||
* | |||
* formatDate(Date.now(), 'yyyy-MM-dd hh:mm:ss.S'); | |||
* // => 2006-07-02 08:09:04.423 | |||
* | |||
* formatDate(Date.now(), 'yyyy-MM-dd E HH:mm:ss'); | |||
* // => 2009-03-10 二 20:09:04 | |||
* | |||
* formatDate(Date.now(), 'yyyy-MM-dd EE hh:mm:ss'); | |||
* // => 2009-03-10 周二 08:09:04 | |||
* | |||
* formatDate(Date.now(), 'yyyy-MM-dd EEE hh:mm:ss'); | |||
* // => 2009-03-10 星期二 08:09:04 | |||
* | |||
* formatDate(Date.now(), 'yyyy-M-d h:m:s.S') | |||
* // => 2006-7-2 8:9:4.18 | |||
*/ | |||
export function formatDate(date, fmt) { | |||
if (date === void 0) date = new Date(); | |||
if (fmt === void 0) fmt = 'yyyy-MM-dd HH:mm:ss'; | |||
date = (typeof date === 'number' || typeof date === 'string') ? new Date(date) : date; | |||
var o = { | |||
'M+': date.getMonth() + 1, // 月份 | |||
'd+': date.getDate(), // 日 | |||
'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时 | |||
'H+': date.getHours(), // 小时 | |||
'm+': date.getMinutes(), // 分 | |||
's+': date.getSeconds(), // 秒 | |||
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度 | |||
'S': date.getMilliseconds(), // 毫秒 | |||
}; | |||
var week = { | |||
'0': '\u65e5', | |||
'1': '\u4e00', | |||
'2': '\u4e8c', | |||
'3': '\u4e09', | |||
'4': '\u56db', | |||
'5': '\u4e94', | |||
'6': '\u516d', | |||
}; | |||
if (/(y+)/.test(fmt)) { | |||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); | |||
} | |||
if (/(E+)/.test(fmt)) { | |||
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + '']); | |||
} | |||
for (var k in o) { | |||
if (new RegExp('(' + k + ')').test(fmt)) { | |||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))); | |||
} | |||
} | |||
return fmt; | |||
} | |||
/** | |||
* 将时间转化为几天前,几小时前,几分钟前 | |||
* | |||
* @param {number} ms | |||
* @returns {*} | |||
* @example | |||
* | |||
* formatTimeAgo(1505232000000); | |||
* // => 1天前 | |||
*/ | |||
export function formatTimeAgo(ms) { | |||
ms = parseInt(ms); | |||
var timeNow = Date.now(); | |||
var diff = (timeNow - ms) / 1000; | |||
var date = new Date(); | |||
var days = Math.round(diff / (24 * 60 * 60)); | |||
var hours = Math.round(diff / (60 * 60)); | |||
var minutes = Math.round(diff / 60); | |||
var second = Math.round(diff); | |||
if (days > 0 && days < 2) { | |||
return days + '天前'; | |||
} else if (days <= 0 && hours > 0) { | |||
return hours + '小时前'; | |||
} else if (hours <= 0 && minutes > 0) { | |||
return minutes + '分钟前'; | |||
} else if (minutes <= 0 && second >= 0) { | |||
return '刚刚'; | |||
} else { | |||
date.setTime(ms); | |||
return (date.getFullYear() + '-' + f(date.getMonth() + 1) + '-' + f(date.getDate()) + ' ' + f(date.getHours()) + ':' + f(date.getMinutes())); | |||
} | |||
function f(n) { | |||
return (n < 10) ? '0' + n : n; | |||
} | |||
} |
@@ -0,0 +1,49 @@ | |||
/** | |||
* @description: 项目入口文件 | |||
* @author: nowThen | |||
*/ | |||
import Vue from 'vue'; | |||
import App from './App.vue'; | |||
import router from './routers/'; | |||
import './routers/intercept'; | |||
import store from './stores'; | |||
import * as filters from './filters/'; | |||
import './services'; | |||
import 'lib-flexible'; | |||
import echarts from 'echarts' | |||
Vue.prototype.$echarts = echarts | |||
import './styles/main.less'; | |||
import FastClick from 'fastclick'; | |||
FastClick.attach(document.body); | |||
Vue.config.errorHandler = (err, vm, info) => { | |||
console.error(err); | |||
}; | |||
Vue.config.devtools = process.env.NODE_ENV === 'development'; | |||
Vue.config.productionTip = process.env.NODE_ENV === 'production'; | |||
window.EventBus = new Vue(); | |||
import { Button, NumberKeyboard, Form, Field, DatetimePicker, Icon, List,} from 'vant'; | |||
Vue.use(Button); | |||
Vue.use(NumberKeyboard); | |||
Vue.use(Form); | |||
Vue.use(Field); | |||
Vue.use(DatetimePicker); | |||
Vue.use(Icon); | |||
Vue.use(List); | |||
// 注册过滤器 | |||
Object.keys(filters).forEach((key) => { | |||
Vue.filter(key, filters[key]); | |||
}); | |||
window.myVue = new Vue({ | |||
router, | |||
store, | |||
render: h => h(App) | |||
}).$mount('#app') |
@@ -0,0 +1,86 @@ | |||
/** | |||
* @description: 路由 | |||
* @author: nowThen | |||
*/ | |||
import Vue from 'vue'; | |||
import Router from 'vue-router'; | |||
const Login = () => import(/* webpackChunkName: "login" */ '@/views/login'); | |||
const Home = () => import(/* webpackChunkName: "home" */ '@/views/home'); | |||
const Person = () => import(/* webpackChunkName: "person" */ '@/views/person'); | |||
const PointRecord = () => import(/* webpackChunkName: "PointRecord" */ '@/views/person/pointRecord.vue'); | |||
const MyTicket = () => import(/* webpackChunkName: "PointRecord" */ '@/views/person/myTicket.vue'); | |||
const UserInfo = () => import(/* webpackChunkName: "UserInfo" */ '@/views/person/userInfo.vue'); | |||
Vue.use(Router); | |||
const routes = [ | |||
{ | |||
path: '/', | |||
name: 'login', | |||
component: Login, | |||
meta: { | |||
title: '登陆' | |||
} | |||
}, | |||
{ | |||
path: '/home', | |||
name: 'home', | |||
component: Home, | |||
meta: { | |||
title: '首页' | |||
} | |||
}, | |||
/* { | |||
path: '/demo', | |||
name: 'demo', | |||
component: Demo, | |||
meta: { | |||
title: '组件Demo_1', // 标题 | |||
requireAuth: false, // 登录权限 | |||
keepAlive: false, | |||
} | |||
}, */ | |||
{ | |||
path: '/person', | |||
name: 'person', | |||
component: Person, | |||
meta: { | |||
title: '我的' | |||
} | |||
}, | |||
{ | |||
path: '/myTicket', | |||
name: 'myTicket', | |||
component: MyTicket, | |||
meta: { | |||
title: '赠券库存' | |||
} | |||
}, | |||
{ | |||
path: '/pointRecord', | |||
name: 'pointRecord', | |||
component: PointRecord, | |||
meta: { | |||
title: '积分操作记录' | |||
} | |||
}, | |||
{ | |||
path: '/userInfo', | |||
name: 'userInfo', | |||
component: UserInfo, | |||
meta: { | |||
title: '登陆信息' | |||
} | |||
}, | |||
]; | |||
const router = new Router({ | |||
mode: 'history', | |||
// mode: 'hash', | |||
routes | |||
}) | |||
export default router; |
@@ -0,0 +1,50 @@ | |||
/** | |||
* @description: 路由拦截 | |||
* @author: nowThen | |||
*/ | |||
import router from './index'; | |||
// 路由导航守卫 | |||
router.beforeEach((to, from, next) => { | |||
// 登录权限 | |||
if (to.meta.requireAuth) { // 判断是否校验登录权限 | |||
if (!window.myVue.userName) { // 判断是否登录,根据实际业务处理 | |||
next({ | |||
path: '/login', | |||
query: { | |||
redirect: to.fullPath // 未登录,跳转到登录页,登录后跳转回当前页。 | |||
} | |||
}) | |||
return; | |||
} | |||
} | |||
// 路由发生变化修改页面title | |||
if (to.meta.title) { | |||
document.title = to.meta.title + ' | 富茂服务商'; | |||
} else { | |||
document.title = '富茂服务商'; | |||
} | |||
next() | |||
}) | |||
router.afterEach((to, from) => { | |||
// console.log(to, from); | |||
if (!(from.path === '/' && from.name === null)) { | |||
setLocalRoute(to, from) | |||
} | |||
}); | |||
function setLocalRoute(to, from) { | |||
// 本地已访问页面路由,存5条 | |||
const localRoute = window.myVue.localRoute = window.myVue.localRoute || []; | |||
const from_index = localRoute.indexOf(from.path); | |||
const to_index = localRoute.indexOf(to.path); | |||
if (from_index < 0) { | |||
localRoute.unshift(from.path); | |||
to_index >= 0 && localRoute.splice(to_index, 1) | |||
} | |||
if (localRoute.length > 5) { | |||
localRoute.splice(0, 1) | |||
} | |||
} |
@@ -0,0 +1,29 @@ | |||
/* api接口地址汇总 | |||
* @Author: nowThen | |||
* @Date: 2019-08-14 16:05:21 | |||
*/ | |||
export const apiUrl = { | |||
login: '/api/user/login', | |||
//交易,核销,收银的echarts图表数据 | |||
getTabletListOrder: '/api/wxDateAmountRecord/listOrder', | |||
getTabletListVerify: '/api/wxDateAmountRecord/listVerified', | |||
getMicroPayAmountOnDate:'/api/wxDateAmountRecord/listMicropay', | |||
// 检查用户是否有权限修改收款账户 | |||
permitModifiy: "/api/merchant/permitModifiy", | |||
// B端用户详情 | |||
userDetail: '/api/user/detail', | |||
//获取积分操作记录 | |||
getCreditList:"/api/credit/list", | |||
//获取会员可赠送的券列表 | |||
wxMerchantcouponSend:"/api/couponSend/list", | |||
// 商户注券记录 | |||
wxMerchantcouponStory: "/api/couponSend/actionLog", | |||
loginOut: '/api/loginOut', | |||
// mock | |||
qryPageConfig: '/test/pageConfig', | |||
msg: '/index/securityPolicy' | |||
} |
@@ -0,0 +1,26 @@ | |||
/* 生成接口,并将接口挂载到vue的原型上 | |||
* @Author: nowThen | |||
* @Date: 2019-08-14 16:41:37 | |||
*/ | |||
import Vue from 'vue'; | |||
import request from './request'; | |||
import { apiUrl } from './apiUrl'; | |||
let services = {}; | |||
Object.entries(apiUrl).forEach((item) => { | |||
services[item[0]] = function (options = {}) { | |||
return request(Object.assign({ | |||
url: item[1] | |||
}, options)) | |||
} | |||
}) | |||
// 将services挂载到vue的原型上 | |||
// 业务中引用的方法:this.$services.接口名(小驼峰) | |||
Object.defineProperty(Vue.prototype, '$http', { | |||
value: services | |||
}); | |||
export default services; |
@@ -0,0 +1,132 @@ | |||
/* | |||
* 接口请求封装 | |||
* @Author: nowThen | |||
* @Date: 2019-08-14 12:00:02 | |||
*/ | |||
import store from "@/stores"; // 引入axios | |||
import axios from "axios"; // 引入axios | |||
import Qs from "qs"; // 引入qs模块,用来序列化post类型的数据 | |||
import { autoMatch, checkStatus } from "./utils"; // 附近处理函数 | |||
import { Toast } from "mint-ui"; // 提示框 | |||
// 创建axios实例 | |||
const instance = axios.create({ | |||
// baseURL: process.env.BASE_URL, | |||
timeout: 30000, // 请求超时时间 | |||
// `transformRequest` 允许在向服务器发送前,修改请求数据 | |||
transformRequest: [ | |||
function(data) { | |||
// 对 data 进行任意转换处理 | |||
return data; | |||
} | |||
], | |||
// `transformResponse` 在传递给 then/catch 前,允许修改响应数据 | |||
transformResponse: [ | |||
function(data) { | |||
// 对 data 进行任意转换处理 | |||
return JSON.parse(data); | |||
} | |||
] | |||
}); | |||
// 实例添加请求拦截器 | |||
instance.interceptors.request.use( | |||
function(config) { | |||
config.headers.token = store.state.token; | |||
// 在发送请求之前做处理... | |||
config.headers = Object.assign( | |||
config.method === "post" | |||
? { | |||
Accept: "application/json", | |||
"Content-Type": "application/json; charset=UTF-8" | |||
} | |||
: { | |||
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" | |||
}, | |||
config.headers | |||
); | |||
if (config.method === "post") { | |||
const contentType = config.headers["Content-Type"]; | |||
// 根据Content-Type转换data格式 | |||
if (contentType) { | |||
if (contentType.includes("multipart")) { | |||
// 类型 'multipart/form-data;' | |||
// config.data = data; | |||
} else if (contentType.includes("json")) { | |||
// 类型 'application/json;' | |||
// 服务器收到的raw body(原始数据) "{name:"nowThen",age:"18"}"(普通字符串) | |||
config.data = JSON.stringify(config.data); | |||
} else { | |||
// 类型 'application/x-www-form-urlencoded;' | |||
// 服务器收到的raw body(原始数据) name=nowThen&age=18 | |||
config.data = Qs.stringify(config.data); | |||
} | |||
} | |||
} | |||
return Promise.resolve(config); | |||
}, | |||
function(error) { | |||
// 对请求错误做处理... | |||
return Promise.reject(error); | |||
} | |||
); | |||
// 实例添加响应拦截器 | |||
instance.interceptors.response.use( | |||
function(response) { | |||
// 对响应数据做处理,以下根据实际数据结构改动!!... | |||
// const { reason_code } = response.data || {}; | |||
// if (reason_code === '001') { // 请求超时,跳转登录页 | |||
// const instance = Toast('请求超时,即将跳转到登录页面...'); | |||
// setTimeout(() => { | |||
// instance.close(); | |||
// window.location.href = '/login'; | |||
// }, 3000) | |||
// } | |||
return Promise.resolve(checkStatus(response)); | |||
}, | |||
function(error) { | |||
// 对响应错误做处理... | |||
if (error.response) { | |||
return Promise.reject(checkStatus(error.response)); | |||
} else if ( | |||
error.code == "ECONNABORTED" && | |||
error.message.indexOf("timeout") != -1 | |||
) { | |||
return Promise.reject({ msg: "请求超时" }); | |||
} else { | |||
return Promise.reject({}); | |||
} | |||
} | |||
); | |||
const request = async function(opt) { | |||
try { | |||
const options = Object.assign( | |||
{ | |||
method: "get", | |||
ifHandleError: true // 是否统一处理接口失败(提示) | |||
}, | |||
opt | |||
); | |||
// 匹配接口前缀 开发环境则通过proxy配置转发请求; 生产环境根据实际配置 | |||
options.baseURL = autoMatch(options.prefix); | |||
const res = await instance(options); | |||
// console.log(res); | |||
if (!res.success && options.ifHandleError) { | |||
// 自定义参数,是否允许全局提示错误信息 | |||
Toast(res.error || "请求处理失败!"); | |||
} | |||
return res; | |||
} catch (err) { | |||
if (options.ifHandleError) { | |||
// 自定义参数,是否允许全局提示错误信息 | |||
Toast(err.msg || "请求处理失败!"); | |||
} | |||
return err; | |||
} | |||
}; | |||
export default request; |
@@ -0,0 +1,80 @@ | |||
/* | |||
* @Author: nowThen | |||
* @Date: 2019-08-14 16:14:30 | |||
*/ | |||
const isDev = process.env.NODE_ENV === 'development'; // 开发 or 生产 | |||
// 匹配接口前缀 | |||
export function autoMatch (prefix) { | |||
let baseUrl = ''; | |||
if (isDev) { | |||
// 开发环境 通过proxy配置转发请求; | |||
baseUrl = `/${prefix || 'fumao'}`; | |||
} else { | |||
// 生产环境 根据实际配置 根据 prefix 匹配url; | |||
// 配置来源 根据实际应用场景更改配置。(1.从全局读取;2.线上配置中心读取) | |||
switch (prefix) { | |||
case 'baidu': | |||
baseUrl = window.LOCAL_CONFIG.baidu; | |||
break; | |||
case 'alipay': | |||
baseUrl = window.LOCAL_CONFIG.alipay; | |||
break; | |||
default: | |||
baseUrl = window.LOCAL_CONFIG.default; | |||
} | |||
} | |||
return baseUrl; | |||
} | |||
export function checkStatus (response) { | |||
const status = response.status || -1000; // -1000 自己定义,连接错误的status | |||
if ((status >= 200 && status < 300) || status === 304) { | |||
// 如果http状态码正常,则直接返回数据 | |||
return response.data; | |||
} else { | |||
let errorInfo = ''; | |||
switch (status) { | |||
case -1: | |||
errorInfo = '远程服务响应失败,请稍后重试'; | |||
break; | |||
case 400: | |||
errorInfo = '400:错误请求'; | |||
break; | |||
case 401: | |||
errorInfo = '401:访问令牌无效或已过期'; | |||
break; | |||
case 403: | |||
errorInfo = '403:拒绝访问'; | |||
break; | |||
case 404: | |||
errorInfo = '404:资源不存在'; | |||
break; | |||
case 405: | |||
errorInfo = '405:请求方法未允许' | |||
break; | |||
case 408: | |||
errorInfo = '408:请求超时' | |||
break; | |||
case 500: | |||
errorInfo = '500:访问服务失败'; | |||
break; | |||
case 501: | |||
errorInfo = '501:未实现'; | |||
break; | |||
case 502: | |||
errorInfo = '502:无效网关'; | |||
break; | |||
case 503: | |||
errorInfo = '503:服务不可用' | |||
break; | |||
default: | |||
errorInfo = `连接错误` | |||
} | |||
return { | |||
status, | |||
msg: errorInfo | |||
} | |||
} | |||
} |
@@ -0,0 +1,23 @@ | |||
/** | |||
* @Author: nowThen | |||
* @Date: 2019-08-22 14:30:51 | |||
*/ | |||
import Vue from 'vue' | |||
import Vuex from 'vuex' | |||
Vue.use(Vuex) | |||
export default new Vuex.Store({ | |||
state: { | |||
token: '0f2e7947-b7d8-444a-9d3a-7786e58e9177', | |||
}, | |||
mutations: { | |||
}, | |||
actions: { | |||
} | |||
}) |
@@ -0,0 +1,32 @@ | |||
* { | |||
-webkit-tap-highlight-color: rgba(0,0,0,0); | |||
-webkit-touch-callout: none; | |||
-webkit-overflow-scrolling: touch; | |||
} | |||
.page { | |||
background: #fff; | |||
color: @colorFont; | |||
position: absolute; | |||
width: 100%; | |||
// height: 100%; | |||
} | |||
.page-content { | |||
width: 100%; | |||
height: 100%; | |||
padding: 10px; | |||
} | |||
.common-msg-area { | |||
background: #fff; | |||
border-radius: 4px; | |||
box-shadow: 0 0 4px 0px rgba(128, 100, 100, 0.2); | |||
margin-bottom: 15px; | |||
} | |||
.header-fixed { | |||
padding-top: 44px; | |||
} | |||
.iconfont { | |||
display: inline-block; | |||
font-size: 14px; | |||
} |
@@ -0,0 +1,7 @@ | |||
// 样式整合页 | |||
@import '~@/assets/style/minireset.css'; //基本样式重置 | |||
@import '~@/assets/style/normalize.css'; //css跨浏览器样式重置 | |||
@import '~@/assets/fonts/iconfont.css'; // 字体图标 | |||
@import './common'; |
@@ -0,0 +1,250 @@ | |||
// 全局mix函数 | |||
// 清除浮动 | |||
.clear() { | |||
&:before, | |||
&:after { | |||
content: " "; // 1 | |||
display: table; // 2 | |||
} | |||
&:after { | |||
clear: both; | |||
} | |||
} | |||
// 强制换行 | |||
.break-all() { | |||
word-break: break-all; | |||
word-wrap: break-word; | |||
} | |||
// 文字溢出处理 | |||
.text-overflow() { | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
} | |||
//** | |||
// * @desc 绘制三角形 http://lugolabs.com/caret | |||
// * @param {String} $position | |||
// * @param {Number} $caret-width 三角形外宽度 | |||
// * @param {Number} $border-width 三角形内宽度 | |||
// * @param {String} $direction 三角形方向 | |||
// * @param {String} $border-color 边框颜色 | |||
// * @param {String} $background-color 背景颜色 | |||
// */ | |||
.caret(@position, @caret-width, @border-width, @direction, @border-color, @background-color){ | |||
position: relative; | |||
&:before, | |||
&:after { | |||
content:""; | |||
position: absolute; | |||
} | |||
// top | |||
& when (@direction = top) { | |||
&:before { | |||
top:0; | |||
left: 0; | |||
border-bottom: @caret-width solid @border-color; | |||
border-left: @caret-width solid transparent; | |||
border-right: @caret-width solid transparent; | |||
} | |||
&:after { | |||
left: @border-width; | |||
top: @border-width; | |||
border-bottom: (@caret-width - @border-width) solid @background-color; | |||
border-left: (@caret-width - @border-width) solid transparent; | |||
border-right: (@caret-width - @border-width) solid transparent; | |||
} | |||
} | |||
// right | |||
& when (@direction = right) { | |||
&:before { | |||
top:0; | |||
left: 0; | |||
border-left: @caret-width solid @border-color; | |||
border-top: @caret-width solid transparent; | |||
border-bottom: @caret-width solid transparent; | |||
} | |||
&:after { | |||
left: 0; | |||
top: @border-width; | |||
border-left: (@caret-width - @border-width) solid @background-color; | |||
border-top: (@caret-width - @border-width) solid transparent; | |||
border-bottom: (@caret-width - @border-width) solid transparent; | |||
} | |||
} | |||
// bottom | |||
& when (@direction = bottom) { | |||
&:before { | |||
top:0; | |||
left: 0; | |||
border-top: @caret-width solid @border-color; | |||
border-left: @caret-width solid transparent; | |||
border-right: @caret-width solid transparent; | |||
} | |||
&:after { | |||
left: @border-width; | |||
top: 0; | |||
border-top: (@caret-width - @border-width) solid @background-color; | |||
border-left: (@caret-width - @border-width) solid transparent; | |||
border-right: (@caret-width - @border-width) solid transparent; | |||
} | |||
} | |||
// left | |||
& when (@direction = left) { | |||
&:before { | |||
top:0; | |||
left: 0; | |||
border-right: @caret-width solid @border-color; | |||
border-top: @caret-width solid transparent; | |||
border-bottom: @caret-width solid transparent; | |||
} | |||
&:after { | |||
left: @border-width; | |||
top: @border-width; | |||
border-right: (@caret-width - @border-width) solid @background-color; | |||
border-top: (@caret-width - @border-width) solid transparent; | |||
border-bottom: (@caret-width - @border-width) solid transparent; | |||
} | |||
} | |||
} | |||
// * @desc 移动端1px的线 利用伪类+background-image | |||
.hairline(@position, @color) { | |||
// top | |||
& when (@position = top) { | |||
&:before { | |||
left: 0; | |||
top: 0; | |||
bottom: auto; | |||
right: auto; | |||
height: 1Px; | |||
width: 100%; | |||
.hairline-background-image(@color); | |||
background-size: 100% 1Px; | |||
} | |||
} | |||
// left | |||
& when (@position = left) { | |||
&:before { | |||
left: 0; | |||
top: 0; | |||
bottom: auto; | |||
right: auto; | |||
width: 1Px; | |||
height: 100%; | |||
.hairline-background-image(@color); | |||
background-size: 1Px 100%; | |||
} | |||
} | |||
// bottom | |||
& when (@position = bottom) { | |||
&:after { | |||
left: 0; | |||
bottom: 0; | |||
right: auto; | |||
top: auto; | |||
height: 1Px; | |||
width: 100%; | |||
.hairline-background-image(@color); | |||
background-size: 100% 1Px; | |||
} | |||
} | |||
// right | |||
& when (@position = right) { | |||
&:after { | |||
right: 0; | |||
top: 0; | |||
left: auto; | |||
bottom: auto; | |||
width: 1Px; | |||
height: 100%; | |||
.hairline-background-image(@color); | |||
background-size: 1Px 100%; | |||
} | |||
} | |||
} | |||
.hairline-background-image(@color) { | |||
content: ""; | |||
position: absolute; | |||
display: block; | |||
z-index: 15; | |||
background-image: linear-gradient(180deg, @color, @color 50%, transparent 50%); | |||
background-repeat: no-repeat; | |||
} | |||
//** | |||
// * @desc 文本多行文字截断 | |||
// * @param {Number} @lines 行数 | |||
// * @param {Number} @line-height 行高 当@lines=1的时候,@line-height默认传0,相当于截取的字节数 | |||
// */ | |||
.line-clamp(@lines, @line-height: 1.4em) { | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
& when (@lines = 1) { | |||
white-space: nowrap; | |||
width: 100% - @line-height; | |||
} | |||
& when not (@lines = 1) { | |||
.flexbox(); | |||
-webkit-box-orient: vertical; | |||
box-orient: vertical; | |||
-webkit-line-clamp: @lines; | |||
line-clamp: @lines; | |||
line-height: @line-height; | |||
max-height: @line-height * @lines; | |||
} | |||
} | |||
// * @desc 文本占位符样式重置 | |||
.placeholder(@color: @input-color-placeholder) { | |||
// Firefox | |||
&::-moz-placeholder { | |||
color: @color; | |||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 | |||
} | |||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ | |||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome | |||
} | |||
/** | |||
/* @desc 滚动条的样式 | |||
/* ::-webkit-scrollbar 滚动条整体部分 | |||
/* ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) | |||
/* ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) | |||
/* ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 | |||
/* ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) | |||
/* ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处 | |||
/* ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 | |||
*/ | |||
.scrollbar(@color: #f5f5f5; @width: 16px; @height: 16px) { | |||
///定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/ | |||
&::-webkit-scrollbar { | |||
width: @width; | |||
height: @height; | |||
background-color: @color; | |||
} | |||
// /定义滚动条轨道 内阴影+圆角/ | |||
&::-webkit-scrollbar-track { | |||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | |||
border-radius: 10px; | |||
background-color: @color; | |||
} | |||
// /定义滑块 内阴影+圆角/ | |||
&::-webkit-scrollbar-thumb { | |||
border-radius: 10px; | |||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); | |||
background-color: #555; | |||
} | |||
} |
@@ -0,0 +1,34 @@ | |||
// less全局变量 | |||
@colorFont: #424242; | |||
@colorGrayLight: #bdbdbd; | |||
@colorRed: red; | |||
@colorWhite: #fff; | |||
@colorBlack: #212121; | |||
@colorBlueMain: #43a9f1; | |||
@colorBlueLight: #49b2f5; | |||
@colorBlueText: #0076ff; | |||
@colorBlue: #52A0FD; | |||
//line | |||
@colorLine: #e1e1e1; | |||
// bg | |||
@colorBg: #f4f5f5; | |||
//fontSize | |||
@fontSizeH1: 20px; | |||
@fontSizeH2: 16px; | |||
@fontSizeH3: 14px; | |||
@fontSizeH4: 12px; | |||
@fontSize12: .33rem; | |||
@fontSize14: .38rem; | |||
@fontSize16: .43rem; | |||
@fontSize18: .48rem; | |||
@fontSize20: .53rem; | |||
@fontSize22: .58rem; | |||
@fontSize24: .63rem; | |||
@fontSize26: .68rem; | |||
@fontSize28: .73rem; | |||
@fontSize30: .78rem; |
@@ -0,0 +1,44 @@ | |||
// 防抖 | |||
export function debounce(func, wait, immediate = true) { | |||
let timer = null; | |||
const _debounce = function(...args) { | |||
const context = this; | |||
if (timer) { | |||
clearTimeout(timer) | |||
} | |||
if (immediate) { | |||
if (!timer) { // null | |||
func.apply(this, args); | |||
} | |||
timer = setTimeout(() => { | |||
timer = null; | |||
}, wait) | |||
} else { | |||
timer = setTimeout(() => { | |||
func.apply(context, args); | |||
timer = null; | |||
}, wait) | |||
} | |||
} | |||
_debounce.cancel = function() { | |||
clearTimeout(timer); | |||
timer = null; | |||
} | |||
return _debounce; | |||
} | |||
// 节流 | |||
export function throttle(func, wait, options = {}) { | |||
let timer = null; | |||
const _throttle = function(...args) { | |||
const context = this; | |||
if (!timer) { | |||
timer = setTimeout(() => { | |||
func.apply(context, args); | |||
timer = null; | |||
}, wait) | |||
} | |||
} | |||
return _throttle; | |||
} |
@@ -0,0 +1,154 @@ | |||
<template> | |||
<section class="page-demo"> | |||
<Header showLeft showRight fixed @handle-left="goBack"></Header> | |||
<div class="page-content header-fixed"> | |||
<h1 style="text-align:center;">demo页面</h1> | |||
<p>1*1</p> | |||
<p>1*2</p> | |||
<p>1*3</p> | |||
<p>1*4</p> | |||
<p>1*5</p> | |||
<p>1*6</p> | |||
<p>1*7</p> | |||
<p>1*8</p> | |||
<p>1*9</p> | |||
<p>1*10</p> | |||
<p>1*11</p> | |||
<p>1*12</p> | |||
<p>1*13</p> | |||
<p>1*14</p> | |||
<p>1*15</p> | |||
<p>1*16</p> | |||
<p>1*17</p> | |||
<p>1*18</p> | |||
<p>1*19</p> | |||
<p>1*20</p> | |||
<p>1*21</p> | |||
<p>1*22</p> | |||
<p>1*23</p> | |||
<p>1*24</p> | |||
<p>1*25</p> | |||
<p>1*26</p> | |||
<p>1*27</p> | |||
<p>1*28</p> | |||
<p>1*29</p> | |||
<p>1*30</p> | |||
<p>1*31</p> | |||
<p>1*32</p> | |||
<p>1*33</p> | |||
<p>1*34</p> | |||
<p>1*35</p> | |||
<p>1*36</p> | |||
<p>1*37</p> | |||
<p>1*38</p> | |||
<p>1*39</p> | |||
<p>1*40</p> | |||
<p>1*41</p> | |||
<p>1*42</p> | |||
<p>1*43</p> | |||
<p>1*44</p> | |||
<p>1*45</p> | |||
<p>1*46</p> | |||
<p>1*47</p> | |||
<p>1*48</p> | |||
<p>1*49</p> | |||
<p>1*50</p> | |||
<p>1*51</p> | |||
<p>1*52</p> | |||
<p>1*53</p> | |||
<p>1*54</p> | |||
<p>1*55</p> | |||
<p>1*56</p> | |||
<p>1*57</p> | |||
<p>1*58</p> | |||
<p>1*59</p> | |||
<p>1*60</p> | |||
<p>1*61</p> | |||
<p>1*62</p> | |||
<p>1*63</p> | |||
<p>1*64</p> | |||
<p>1*65</p> | |||
<p>1*66</p> | |||
<p>1*67</p> | |||
<p>1*68</p> | |||
<p>1*69</p> | |||
<p>1*70</p> | |||
<p>1*71</p> | |||
<p>1*72</p> | |||
<p>1*73</p> | |||
<p>1*74</p> | |||
<p>1*75</p> | |||
<p>1*76</p> | |||
<p>1*77</p> | |||
<p>1*78</p> | |||
<p>1*79</p> | |||
<p>1*80</p> | |||
<p>1*81</p> | |||
<p>1*82</p> | |||
<p>1*83</p> | |||
<p>1*84</p> | |||
<p>1*85</p> | |||
<p>1*86</p> | |||
<p>1*87</p> | |||
<p>1*88</p> | |||
<p>1*89</p> | |||
<p>1*90</p> | |||
<p>1*91</p> | |||
<p>1*92</p> | |||
<p>1*93</p> | |||
<p>1*94</p> | |||
<p>1*95</p> | |||
<p>1*96</p> | |||
<p>1*97</p> | |||
<p>1*98</p> | |||
<p>1*99</p> | |||
<p>1*100</p> | |||
<MainButton /> | |||
</div> | |||
</section> | |||
</template> | |||
<script> | |||
import { formatDate } from '@/utils/cloud-utils'; | |||
import MainButton from '@/component_basics/MainButton'; | |||
import Header from '@/component_basics/Header'; | |||
import transferDom from '@/directives/transferDom'; | |||
export default { | |||
name: 'page-demo', | |||
components: { // 组件 | |||
MainButton, | |||
Header, | |||
}, | |||
directives: { | |||
// 指令 | |||
transferDom | |||
}, | |||
filters: { | |||
// 过滤器 | |||
formatDate | |||
}, | |||
data() { | |||
return { | |||
title: '测试' | |||
}; | |||
}, | |||
methods: { | |||
goBack() { | |||
window.history.length > 1 | |||
? this.$router.go(-1) | |||
: this.$router.push('/') | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
.page-demo { | |||
text-align: left; | |||
.common-btns { | |||
position: fixed; | |||
bottom: 0; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,447 @@ | |||
<template> | |||
<div class='page-home'> | |||
<div class="header-wrap"> | |||
<img class="header-bg" src="../../assets/images/bannerbg.png"> | |||
<p class="header-title">富茂服务商</p> | |||
<div class="header-box"> | |||
<img class="header-logo" src="../../assets/images/admin.png"> | |||
<p>富茂服务商</p> | |||
</div> | |||
</div> | |||
<!-- --> | |||
<div class="line-item-box"> | |||
<!-- 111 --> | |||
<div class="line-title clear"> | |||
<p class="line-left">交易记录</p> | |||
<img class="line-detail" src="../../assets/images/jian.png"> | |||
<p class="line-right">今日交易额: 0元</p> | |||
</div> | |||
<div id="jiaoyiChart" v-if="showJiaoyi"></div> | |||
<div class="no-data" v-if="!showJiaoyi"> | |||
<img class="no-data-img" src="../../assets/images/nothave01.png"> | |||
<p class="no-data-text">暂无数据</p> | |||
</div> | |||
</div> | |||
<div class="line-item-box"> | |||
<!-- 222 --> | |||
<div class="line-title clear"> | |||
<p class="line-left">核销记录</p> | |||
<img class="line-detail" src="../../assets/images/jian.png"> | |||
<p class="line-right">今日核销额: 0元</p> | |||
</div> | |||
<div id="hexiaoChart" v-if="showHexiao"></div> | |||
<div class="no-data" v-if="!showHexiao"> | |||
<img class="no-data-img" src="../../assets/images/nothave01.png"> | |||
<p class="no-data-text">暂无数据</p> | |||
</div> | |||
</div> | |||
<div class="line-item-box"> | |||
<!-- 333 --> | |||
<div class="line-title clear"> | |||
<p class="line-left">收银记录</p> | |||
<img class="line-detail" src="../../assets/images/jian.png"> | |||
<p class="line-right">今日收银: 0元</p> | |||
</div> | |||
<div id="shouyinChart" v-if="showShouyin"></div> | |||
<div class="no-data" v-if="!showShouyin"> | |||
<img class="no-data-img" src="../../assets/images/nothave01.png"> | |||
<p class="no-data-text">暂无数据</p> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script type="text/babel"> | |||
// 组件 | |||
export default { | |||
name: 'page-index', | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
showJiaoyi: true, | |||
showHexiao: true, | |||
showShouyin: true, | |||
}; | |||
}, | |||
mounted() { | |||
this.getTabletListOrder(); | |||
this.getTabletListVerify(); | |||
this.getMicroPayAmountOnDate(); | |||
}, | |||
methods: { | |||
/** | |||
* 交易记录 | |||
*/ | |||
getTabletListOrder() { | |||
this.$http.getTabletListOrder({ | |||
method: 'get', | |||
}).then(res => { | |||
let newArr = { | |||
xList: [], | |||
amountList: [] | |||
} | |||
res.data && res.data.map(file => { | |||
newArr.xList.push(file.mouthAndDate) | |||
newArr.amountList.push(file.amountStr) | |||
}) | |||
if (newArr.xList.length > 0 && newArr.amountList.length > 0) { | |||
this.showJiaoyi = true; | |||
let jiaoyiChart = this.$echarts.init(document.getElementById('jiaoyiChart')) | |||
this.$nextTick(() => { | |||
this.setOptionJiaoyi(jiaoyiChart, newArr.xList, newArr.amountList) | |||
}) | |||
} else { | |||
this.showJiaoyi = false; | |||
} | |||
}) | |||
}, | |||
/** | |||
* 核销记录 | |||
*/ | |||
getTabletListVerify() { | |||
this.$http.getTabletListVerify({ | |||
method: 'get', | |||
}).then(res => { | |||
let newArr = { | |||
xList: [], | |||
amountList: [] | |||
} | |||
res.data && res.data.map(file => { | |||
newArr.xList.push(file.mouthAndDate) | |||
newArr.amountList.push(file.amountStr) | |||
}) | |||
if (newArr.xList.length > 0 && newArr.amountList.length > 0) { | |||
this.showHexiao = true; | |||
let hexiaoChart = this.$echarts.init(document.getElementById('hexiaoChart')) | |||
this.$nextTick(() => { | |||
this.setOptionHexiao(hexiaoChart, newArr.xList, newArr.amountList) | |||
}) | |||
} else { | |||
this.showHexiao = false; | |||
} | |||
}) | |||
}, | |||
/** | |||
* 收银记录 | |||
*/ | |||
getMicroPayAmountOnDate() { | |||
this.$http.getMicroPayAmountOnDate({ | |||
method: 'get', | |||
}).then(res => { | |||
let newArr = { | |||
xList: [], | |||
amountList: [] | |||
} | |||
res.data && res.data.map(file => { | |||
newArr.xList.push(file.mouthAndDate) | |||
newArr.amountList.push(file.amountStr) | |||
}) | |||
if (newArr.xList.length > 0 && newArr.amountList.length > 0) { | |||
this.showShouyin = true; | |||
let shouyinChart = this.$echarts.init(document.getElementById('shouyinChart')) | |||
this.$nextTick(() => { | |||
this.setOptionShouyin(shouyinChart, newArr.xList, newArr.amountList) | |||
}) | |||
} else { | |||
this.showShouyin = false; | |||
} | |||
}) | |||
}, | |||
setOptionJiaoyi(chart, xdata, ydata) { | |||
const option = { | |||
color: ['#FF6A6A'], | |||
fontSize: "14rpx", | |||
grid: { | |||
top: '3%', | |||
left: "5%", | |||
right: "7%", | |||
bottom: "4%", | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
axisLine: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
type: 'category', | |||
boundaryGap: false, | |||
data: xdata | |||
}, | |||
yAxis: { | |||
axisLine: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
type: 'value', | |||
splitLine: { | |||
lineStyle: { | |||
type: 'none' | |||
} | |||
}, | |||
axisLabel: { | |||
rotate: 40, | |||
} | |||
}, | |||
series: [{ | |||
data: ydata, | |||
type: 'line', | |||
smooth: true, | |||
lineStyle: { | |||
normal: { | |||
color: '#FF6A6A', | |||
} | |||
}, | |||
areaStyle: {} | |||
}] | |||
} | |||
chart.setOption(option) | |||
}, | |||
setOptionHexiao(chart, xdata, ydata) { | |||
const option = { | |||
color: '#FFCE00', | |||
fontSize: "14rpx", | |||
grid: { | |||
top: '3%', | |||
left: "5%", | |||
right: "7%", | |||
bottom: "4%", | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
axisLine: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
type: 'category', | |||
boundaryGap: false, | |||
data: xdata | |||
}, | |||
yAxis: { | |||
axisLine: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
type: 'value', | |||
splitLine: { | |||
lineStyle: { | |||
type: 'none' | |||
} | |||
}, | |||
axisLabel: { | |||
rotate: 40, | |||
} | |||
}, | |||
series: [{ | |||
data: ydata, | |||
type: 'line', | |||
smooth: true, | |||
areaStyle: {} | |||
}] | |||
} | |||
chart.setOption(option) | |||
}, | |||
setOptionShouyin(chart, xdata, ydata) { | |||
const option = { | |||
title: { | |||
padding: [10, 0, 0, 20], | |||
textStyle: { | |||
fontSize: 14, | |||
color: '#FF6A6A' | |||
}, | |||
}, | |||
backgroundColor: "#fff", | |||
color: ["#006EFF", "#67E0E3", "#9FE6B8"], | |||
animation: true, | |||
grid: { | |||
top: '3%', | |||
left: "5%", | |||
right: "7%", | |||
bottom: "4%", | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
boundaryGap: false, | |||
data: xdata, | |||
splitLine: { | |||
show: false | |||
}, //去除网格线 | |||
axisLine: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
} | |||
}, | |||
yAxis: [{ | |||
splitLine: { | |||
lineStyle: { | |||
type: 'none' | |||
} | |||
}, | |||
axisLine: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
axisLabel: { | |||
rotate: 40, | |||
formatter: function(a, b) { | |||
return a | |||
} | |||
}, | |||
type: 'value', | |||
}], | |||
series: [{ | |||
type: 'line', | |||
data: ydata, | |||
smooth: true, //这句就是让曲线变平滑的 | |||
lineStyle: { | |||
normal: { | |||
color: '#33cdff', | |||
} | |||
}, | |||
areaStyle: { | |||
normal: { | |||
color: this.$echarts.graphic.LinearGradient( | |||
0, 0, 0, 1, [{ | |||
offset: 0, | |||
color: '#FFF' | |||
}, { | |||
offset: 1, | |||
color: '#52A0FD' | |||
}] | |||
) | |||
} | |||
}, | |||
}] | |||
}; | |||
chart.setOption(option) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
@font-face { | |||
font-family: 'iconfont'; /* project id 1353693 */ | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot'); | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg'); | |||
} | |||
.page-home { | |||
background: #f8f8fa; | |||
margin-bottom: 1.6rem; | |||
} | |||
.header-wrap { | |||
width: 100%; | |||
height: 4rem; | |||
position: relative; | |||
margin-bottom: 1rem; | |||
.header-bg { | |||
width: 100%; | |||
height: 4rem; | |||
} | |||
.header-title { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100%; | |||
height: 1.5rem; | |||
line-height: 1.5rem; | |||
color: #fff; | |||
font-size: @fontSize16; | |||
} | |||
.header-box { | |||
position: absolute; | |||
left: 3.5%; | |||
top: 1.4rem; | |||
width: 93%; | |||
height: 3rem; | |||
background: #fff; | |||
border-radius: .4rem; | |||
.header-logo { | |||
width: 1.7rem; | |||
height: 1.7rem; | |||
margin: .2rem auto; | |||
} | |||
} | |||
} | |||
.line-item-box { | |||
width: 93%; | |||
height: 5.7rem; | |||
background: #fff; | |||
border-radius: .15rem; | |||
margin: .3rem auto; | |||
padding: .2rem 0 .3rem 0; | |||
.line-title { | |||
height: 1rem; | |||
line-height: 1rem; | |||
padding-left: .4rem; | |||
.line-left { | |||
float: left; | |||
font-size: @fontSize16; | |||
} | |||
.line-detail { | |||
float: right; | |||
width: .7rem; | |||
height: .7rem; | |||
margin-top: .1rem; | |||
} | |||
.line-right { | |||
float: right; | |||
margin-right: .2rem; | |||
font-size: @fontSize14; | |||
color: #919191; | |||
} | |||
} | |||
// | |||
.no-data { | |||
.no-data-img { | |||
width: 2.2rem; | |||
height: 2.2rem; | |||
margin: .3rem; | |||
} | |||
.no-data-text { | |||
font-size: @fontSize16; | |||
color: #afd9eb; | |||
} | |||
} | |||
} | |||
#jiaoyiChart,#hexiaoChart,#shouyinChart { | |||
width: 100%; | |||
height: 4rem; | |||
margin-top: .2rem; | |||
} | |||
</style> |
@@ -0,0 +1,109 @@ | |||
<template> | |||
<div class='login-page'> | |||
<div class="login-title">登陆</div> | |||
<img class="login-logo" :src="loginImgUrl"> | |||
<div class=""> | |||
<van-form @submit="onSubmit"> | |||
<van-field | |||
v-model="username" | |||
name="userName" | |||
label="用户名" | |||
placeholder="用户名" | |||
:rules="[{ required: true, message: '请填写用户名' }]" | |||
/> | |||
<van-field | |||
v-model="password" | |||
type="password" | |||
name="password" | |||
label="密码" | |||
placeholder="密码" | |||
:rules="[{ required: true, message: '请填写密码' }]" | |||
/> | |||
<div style="margin: 16px;"> | |||
<van-button round block type="info" native-type="submit"> | |||
登陆管理门店 | |||
</van-button> | |||
</div> | |||
</van-form> | |||
</div> | |||
</div> | |||
</template> | |||
<script type="text/babel"> | |||
// 组件 | |||
export default { | |||
name: 'page-index', | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
loginImgUrl: require('../../assets/images/logo.png'), | |||
username: '18872592633', | |||
password: '123456GD', | |||
}; | |||
}, | |||
created() { | |||
}, | |||
methods: { | |||
onSubmit(val) { | |||
console.log(val); | |||
console.log(333) | |||
this.$http.login({ | |||
method: 'post', | |||
data: { | |||
phone: val.userName, | |||
password: val.password, | |||
appId: "wxa2c60cdeef4ec602", | |||
// latitude: 34.51685, | |||
// longitude: 110.89456, | |||
} | |||
}).then(res => { | |||
console.log(res) | |||
if (res.code === 200) { | |||
this.$router.push({ | |||
path: '/home' | |||
}) | |||
} | |||
}) | |||
}, | |||
} | |||
}; | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
@font-face { | |||
font-family: 'iconfont'; /* project id 1353693 */ | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot'); | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg'); | |||
} | |||
.login-page { | |||
width: 100%; | |||
background: #fff; | |||
.login-title { | |||
height: 1.4rem; | |||
line-height: 1.4rem; | |||
background: @colorBlue; | |||
color: #fff; | |||
font-size: @fontSize16; | |||
} | |||
.login-logo { | |||
width: 5.2rem; | |||
height: 5.2rem; | |||
display: block; | |||
margin: 1.5rem auto; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,242 @@ | |||
<template> | |||
<div class='page-home'> | |||
<div class="header-wrap"> | |||
<img class="header-bg" src="../../assets/images/bannerbg.png"> | |||
<div class="header-box" @click="goToUserInfo"> | |||
<img class="header-logo" src="../../assets/images/admin.png"> | |||
<div class="header-name-box"> | |||
<p class="header-title">{{userInfo.mall_name}}({{userInfo.merchant_name}})</p> | |||
<p class="header-title">{{userInfo.phone}}</p> | |||
</div> | |||
<img class="header-detail" src="../../assets/images/jian.png"> | |||
</div> | |||
</div> | |||
<div> | |||
<!-- <div class="ul-handle"> | |||
<span class="item-left">修改密码</span> | |||
<img class="item-detail" src="../../assets/images/jian.png"> | |||
</div> --> | |||
<div class="ul-handle" @click="goToPage(1)"> | |||
<span class="item-left">收款账户管理</span> | |||
<img class="item-detail" src="../../assets/images/jian.png"> | |||
<span class="item-left item-right" style="margin-right:0;">{{userInfo.merchant_name}}</span> | |||
</div> | |||
<div class="ul-handle" @click="goToPage(2)"> | |||
<span class="item-left">我的赠券</span> | |||
<img class="item-detail" src="../../assets/images/jian.png"> | |||
</div> | |||
<div class="ul-handle" @click="goToPage(3)"> | |||
<span class="item-left">会员列表</span> | |||
<img class="item-detail" src="../../assets/images/jian.png"> | |||
</div> | |||
<div class="ul-handle" @click="goToPage(4)"> | |||
<span class="item-left">积分操作记录</span> | |||
<img class="item-detail" src="../../assets/images/jian.png"> | |||
</div> | |||
<div class="ul-handle"> | |||
<span class="item-left">客服电话</span> | |||
<span class="item-left item-right">{{userInfo.service_phone}}</span> | |||
</div> | |||
</div> | |||
<button class="logout-btn">退出登录</button> | |||
</div> | |||
</template> | |||
<script type="text/babel"> | |||
// 组件 | |||
export default { | |||
name: 'page-index', | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
haveData: false, | |||
userInfo: { | |||
mall_name: '', | |||
merchant_name: '', | |||
phone: '', | |||
service_phone: '', | |||
name: '', | |||
merchant_id: '' | |||
}, | |||
routerUrl: ['/accountManage','/myTicket','/mermberList','/pointRecord'] | |||
}; | |||
}, | |||
mounted() { | |||
this.permitModifiy() | |||
this.userDetail() | |||
}, | |||
methods: { | |||
goToPage(index) { | |||
this.$router.push({ | |||
path: this.routerUrl[index-1], | |||
query: { | |||
userInfo: JSON.stringify(this.userInfo) | |||
} | |||
}) | |||
console.log(index) | |||
}, | |||
/** | |||
* 检查用户是否有权限修改收款账户 | |||
*/ | |||
permitModifiy() { | |||
this.$http.permitModifiy({ | |||
method: 'get', | |||
}).then(res => { | |||
this.haveData = res.data | |||
}) | |||
}, | |||
userDetail() { | |||
this.$http.userDetail({ | |||
method: 'get', | |||
}).then(res => { | |||
this.userInfo.mall_name = res.data.mall_name | |||
this.userInfo.merchant_name = res.data.merchant_name | |||
this.userInfo.phone = res.data.phone | |||
this.userInfo.service_phone = res.data.service_phone | |||
this.userInfo.name = res.data.name | |||
this.userInfo.name = res.data.merchant_id | |||
}) | |||
}, | |||
goToUserInfo () { | |||
this.$router.push({ | |||
path: '/userInfo', | |||
query: { | |||
userInfo: JSON.stringify(this.userInfo) | |||
} | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
.floatR { | |||
float: right; | |||
} | |||
@font-face { | |||
font-family: 'iconfont'; /* project id 1353693 */ | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot'); | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg'); | |||
} | |||
.page { | |||
height: 100%; | |||
} | |||
.page-home { | |||
background: #f8f8fa; | |||
} | |||
.header-wrap { | |||
width: 100%; | |||
height: 4rem; | |||
position: relative; | |||
margin-bottom: 1rem; | |||
.header-bg { | |||
width: 100%; | |||
height: 4rem; | |||
} | |||
.header-box { | |||
position: absolute; | |||
left: 3.5%; | |||
top: 1.4rem; | |||
width: 93%; | |||
height: 3rem; | |||
background: #fff; | |||
border-radius: .2rem; | |||
box-shadow: 2px 6px .3rem rgba(0,0,0,.15); | |||
.header-logo { | |||
float: left; | |||
width: 1.7rem; | |||
height: 1.7rem; | |||
margin: .7rem .5rem 0 .5rem; | |||
} | |||
.header-name-box { | |||
float: left; | |||
width: 5.5rem; | |||
margin-top: .7rem; | |||
.header-title { | |||
width: 100%; | |||
height: .75rem; | |||
line-height: .75rem; | |||
color: #333; | |||
font-size: @fontSize16; | |||
text-align: left; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
&:nth-of-type(2) { | |||
color: #999; | |||
} | |||
} | |||
} | |||
.header-detail { | |||
float: right; | |||
width: .7rem; | |||
height: .7rem; | |||
margin-top: 1.2rem; | |||
margin-right: .3rem; | |||
} | |||
} | |||
} | |||
.ul-handle { | |||
width: 100%; | |||
height: 1.1rem; | |||
line-height: 1.1rem; | |||
background: #fff; | |||
padding: 0 .4rem; | |||
font-size: @fontSize16; | |||
.item-left { | |||
float: left; | |||
} | |||
.item-right { | |||
float: right; | |||
color: #888; | |||
margin-right: .7rem; | |||
} | |||
.item-detail { | |||
float: right; | |||
width: .7rem; | |||
height: .7rem; | |||
margin-top: .18rem; | |||
} | |||
} | |||
.logout-btn { | |||
display: block; | |||
width: 88%; | |||
height: 1.2rem; | |||
line-height: 1.2rem; | |||
background: #fff; | |||
border-radius: .1rem; | |||
border: 1px solid #ddd; | |||
font-size: @fontSize16; | |||
margin: 2.3rem auto 0; | |||
} | |||
</style> |
@@ -0,0 +1,502 @@ | |||
<template> | |||
<div class='page-home'> | |||
<div class="back-box"> | |||
<van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" /> | |||
<span>积分操作记录</span> | |||
</div> | |||
<div class="btn-box"> | |||
<button class="btn-tab" @click="dealType('type01')" :class="cardType==='type01'?'btn-tab-active':''">赠券库存</button> | |||
<button class="btn-tab" @click="dealType('type02')" :class="cardType==='type02'?'btn-tab-active':''">注券记录</button> | |||
</div> | |||
<div class="header-wrap" v-if="cardType==='type02'"> | |||
<div class="header-box"> | |||
<div class="text-left" @click="showPicker('startTime')"> | |||
<span>开始日期</span> | |||
<span>{{startTime}}</span> | |||
</div> | |||
<p class="text-center">至</p> | |||
<div class="text-right" @click="showPicker('endTime')"> | |||
<span>结束日期</span> | |||
<span>{{endTime}}</span> | |||
</div> | |||
<button class="search-btn" @click="doSearch">查询</button> | |||
</div> | |||
</div> | |||
<van-list | |||
v-if="cardType==='type01'" | |||
style="margin-bottom:2rem;height:calc(100vh - 7rem);overflow-y:auto;" | |||
v-model="loading" | |||
:finished="finished" | |||
finished-text="没有更多了" | |||
@load="loadMore" | |||
> | |||
<div class="item-record" v-for="(item,index) in recordList01" :key="index"> | |||
<div class="item-detail"> | |||
<div class="item-left"> | |||
<span>{{item.title}}</span> | |||
<span v-if="item.validStartDate">有效期:{{dealTime(item.validStartDate)}}至{{dealTime(item.validEndDate)}}</span> | |||
<span v-if="!item.validStartDate">{{'有效期:自领取后'+ item.validDays+'日内有效'}}</span> | |||
</div> | |||
<div class="item-right"> | |||
<span>库存:{{item.merchantRemain}}</span> | |||
<span v-if="item.status == 1">已作废</span> | |||
</div> | |||
</div> | |||
</div> | |||
</van-list> | |||
<van-list | |||
v-if="cardType==='type02'" | |||
style="margin-bottom:2rem;height:calc(100vh - 8.69rem);overflow-y:auto;" | |||
v-model="loading" | |||
:finished="finished" | |||
finished-text="没有更多了" | |||
@load="loadMore" | |||
> | |||
<div class="item-record02" v-for="(item,index) in recordList02" :key="index"> | |||
<p class="item-time02">{{dealTime(item.createDate)}}</p> | |||
<div class="item-detail02"> | |||
<div class="item-left02"> | |||
<span>{{item.title}}</span> | |||
<span>{{item.userName}}</span> | |||
<span>操作人:{{item.operator}}</span> | |||
</div> | |||
<div class="item-right02"> | |||
<span>用户手机:{{item.phone}}</span> | |||
<span></span> | |||
<span>注券时间:{{dealTime(item.createDate)}}</span> | |||
</div> | |||
</div> | |||
</div> | |||
</van-list> | |||
<div class="picker-bg" v-if="isShowPicker"> | |||
<van-datetime-picker | |||
@confirm="changeTime" | |||
@cancel="isShowPicker=false" | |||
v-model="currentDate" | |||
type="date" | |||
title="选择年月日" | |||
:min-date="minDate" | |||
:max-date="maxDate" | |||
/> | |||
</div> | |||
</div> | |||
</template> | |||
<script type="text/babel"> | |||
import {formatDate} from '@/filters' | |||
// 组件 | |||
export default { | |||
name: 'page-index', | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
isShowPicker: false, | |||
minDate: new Date(1990, 0, 1), | |||
maxDate: new Date(), | |||
currentDate: new Date(), | |||
startTime: formatDate(new Date(),'yyyy-MM-dd'), | |||
endTime: formatDate(new Date(),'yyyy-MM-dd'), | |||
timeType: 'startTime', | |||
pageNum: 1, | |||
recordList01: [], | |||
recordList02: [], | |||
loading: false, | |||
finished: false, | |||
cardType: 'type01', | |||
}; | |||
}, | |||
mounted() { | |||
this.wxMerchantcouponSend() | |||
}, | |||
methods: { | |||
dealType (str) { | |||
console.log(str) | |||
this.cardType = str | |||
this.doSearch() | |||
}, | |||
doSearch () { | |||
this.pageNum = 1 | |||
this.recordList01 = [] | |||
this.recordList02 = [] | |||
this.wxMerchantcouponSend() | |||
}, | |||
loadMore () { | |||
this.pageNum += 1 | |||
this.wxMerchantcouponSend() | |||
}, | |||
dealTime (time) { | |||
return formatDate(new Date(time), 'yyyy-MM-dd'); | |||
}, | |||
showPicker (str) { | |||
this.isShowPicker = true; | |||
this.timeType = str; | |||
this.currentDate = new Date(this[str]) | |||
}, | |||
changeTime (val) { | |||
this[this.timeType] = formatDate(new Date(val),'yyyy-MM-dd'); | |||
this.isShowPicker = false; | |||
}, | |||
/** | |||
* 检查用户是否有权限修改收款账户 | |||
*/ | |||
wxMerchantcouponSend() { | |||
this.loading = true | |||
let url = '' | |||
let params = {} | |||
if (this.cardType === 'type01') { | |||
url = 'wxMerchantcouponSend' | |||
params = { | |||
pageNum: this.pageNum, | |||
pageSize: 10, | |||
sendType: 7, | |||
expired:'', | |||
status:'', | |||
} | |||
} else { | |||
url = 'wxMerchantcouponStory' | |||
params = { | |||
pageNum: this.pageNum, | |||
pageSize: 10, | |||
channelType:7, | |||
beginDate: this.startTime , | |||
endDate: this.endTime, | |||
} | |||
} | |||
this.$http[url]({ | |||
method: 'get', | |||
params: params | |||
}).then(res => { | |||
if (res.code === 200) { | |||
this.loading = false | |||
this.finished = res.data.list.length === 0 | |||
if (this.cardType === 'type01') { | |||
this.recordList01 = this.recordList01.concat(res.data.list) | |||
} else { | |||
this.recordList02 = this.recordList02.concat(res.data.list) | |||
} | |||
} | |||
}) | |||
}, | |||
goBack() { | |||
this.$router.go(-1) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
.floatR { | |||
float: right; | |||
} | |||
@font-face { | |||
font-family: 'iconfont'; /* project id 1353693 */ | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot'); | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg'); | |||
} | |||
.page-home { | |||
background: #f8f8fa; | |||
.back-box { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
z-index: 1000; | |||
width: 100%; | |||
height: 1.3rem; | |||
line-height: 1.3rem; | |||
background: #52A0FD; | |||
color: #fff; | |||
font-size: @fontSize16; | |||
.back-icon { | |||
float: left; | |||
margin: .4rem 0 0 .1rem; | |||
} | |||
} | |||
} | |||
.header-wrap { | |||
width: 100%; | |||
height: 4rem; | |||
position: relative; | |||
top: -1rem; | |||
.header-bg { | |||
width: 100%; | |||
height: 4rem; | |||
} | |||
.header-box { | |||
position: absolute; | |||
left: 3.5%; | |||
top: 1.4rem; | |||
width: 93%; | |||
height: 3rem; | |||
background: url('../../assets/images/reviveimg.png') no-repeat; | |||
background-size: 100%; | |||
border-radius: .2rem; | |||
box-shadow: 2px 6px .3rem rgba(0,0,0,.15); | |||
overflow: hidden; | |||
.header-logo { | |||
float: left; | |||
width: 1.7rem; | |||
height: 1.7rem; | |||
margin: .7rem .5rem 0 .5rem; | |||
} | |||
.header-name-box { | |||
float: left; | |||
width: 5.5rem; | |||
margin-top: .7rem; | |||
.header-title { | |||
width: 100%; | |||
height: .75rem; | |||
line-height: .75rem; | |||
color: #333; | |||
font-size: @fontSize16; | |||
text-align: left; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
&:nth-of-type(2) { | |||
color: #999; | |||
} | |||
} | |||
} | |||
.header-detail { | |||
float: right; | |||
width: .7rem; | |||
height: .7rem; | |||
margin-top: 1.2rem; | |||
margin-right: .3rem; | |||
} | |||
} | |||
} | |||
.text-left,.text-right { | |||
float: left; | |||
width: 4.4rem; | |||
height: 2rem; | |||
font-size: @fontSize16; | |||
span { | |||
display: block; | |||
margin-top: .3rem; | |||
&:nth-of-type(1) { | |||
color: #888; | |||
} | |||
} | |||
} | |||
.text-center { | |||
float: left; | |||
width: .5rem; | |||
height: 2rem; | |||
line-height: 2rem; | |||
} | |||
.search-btn { | |||
width: 100%; | |||
float: left; | |||
height:1rem; | |||
background: #51a0fc; | |||
color: #fff; | |||
} | |||
.picker-bg { | |||
width: 100vw; | |||
height: 100vh; | |||
background: rgba(0,0,0,.2); | |||
position: fixed; | |||
left: 0; | |||
top: 0; | |||
z-index: 100; | |||
/deep/ .van-picker { | |||
width: 100%; | |||
position:absolute!important; | |||
bottom: 0; | |||
left: 0; | |||
} | |||
} | |||
.item-record { | |||
width: 100%; | |||
font-size: @fontSize14; | |||
.item-time { | |||
width: 100%; | |||
height: .8rem; | |||
line-height: .8rem; | |||
color: #888; | |||
text-align: left; | |||
padding-left: .4rem; | |||
} | |||
.item-detail { | |||
margin: .35rem .4rem; | |||
padding: 0 .4rem; | |||
height: 2rem; | |||
border-radius: .1rem; | |||
background: rgba(0,0,0,0.08); | |||
.item-left,.item-right { | |||
float: left; | |||
span { | |||
display: block; | |||
margin-top: .4rem; | |||
font-size: @fontSize16; | |||
text-align: left; | |||
&:nth-of-type(1) { | |||
max-width: 6rem; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
} | |||
&:nth-of-type(2) { | |||
margin-top: .2rem; | |||
color: #888; | |||
} | |||
} | |||
} | |||
.item-right { | |||
float: right; | |||
span { | |||
text-align: right; | |||
&:nth-of-type(2) { | |||
font-size: @fontSize14; | |||
color: red; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.item-record02 { | |||
width: 100%; | |||
font-size: @fontSize14; | |||
.item-time02 { | |||
width: 100%; | |||
height: .8rem; | |||
line-height: .8rem; | |||
color: #888; | |||
text-align: left; | |||
padding-left: .4rem; | |||
} | |||
.item-detail02 { | |||
padding: 0 .4rem; | |||
width: 100%; | |||
height: 2.2rem; | |||
background: #fff; | |||
.item-left02,.item-right02 { | |||
float: left; | |||
span { | |||
display: block; | |||
margin-top: .3rem; | |||
font-size: @fontSize14; | |||
text-align: left; | |||
&:nth-of-type(1) { | |||
max-width: 5rem; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
} | |||
&:nth-of-type(2) { | |||
min-height: .4rem; | |||
margin-top: .2rem; | |||
color: #888; | |||
} | |||
&:nth-of-type(3) { | |||
margin-top: .2rem; | |||
color: #888; | |||
} | |||
} | |||
} | |||
.item-right02 { | |||
float: right; | |||
span { | |||
text-align: right; | |||
&:nth-of-type(1) { | |||
max-width: 5rem; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
} | |||
&:nth-of-type(2) { | |||
min-height: .4rem; | |||
margin-top: .2rem; | |||
color: #888; | |||
} | |||
&:nth-of-type(3) { | |||
margin-top: .2rem; | |||
color: #888; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.btn-box { | |||
width: 100%; | |||
margin-top: 1.7rem; | |||
overflow: hidden; | |||
.btn-tab { | |||
float: left; | |||
width: 3.4rem; | |||
height: 1rem; | |||
border-radius: .1rem ; | |||
background: #fff; | |||
color: #333; | |||
margin-left: 1.6rem; | |||
&:last-child { | |||
margin-left:0; | |||
} | |||
} | |||
.btn-tab-active { | |||
background: #51a0fc; | |||
color: #fff; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,345 @@ | |||
<template> | |||
<div class='page-home'> | |||
<div class="back-box"> | |||
<van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" /> | |||
<span>登陆信息</span> | |||
</div> | |||
<div class="header-wrap"> | |||
<img class="header-bg" src="../../assets/images/bannerbg.png"> | |||
<div class="header-box"> | |||
<div class="text-left" @click="showPicker('startTime')"> | |||
<span>开始日期</span> | |||
<span>{{startTime}}</span> | |||
</div> | |||
<p class="text-center">至</p> | |||
<div class="text-right" @click="showPicker('endTime')"> | |||
<span>结束日期</span> | |||
<span>{{endTime}}</span> | |||
</div> | |||
<button class="search-btn" @click="doSearch">查询</button> | |||
</div> | |||
</div> | |||
<van-list | |||
style="margin-bottom:2rem;height:calc(100vh - 7rem);overflow-y:auto;" | |||
v-model="loading" | |||
:finished="finished" | |||
finished-text="没有更多了" | |||
@load="loadMore" | |||
> | |||
<div class="item-record" v-for="(item,index) in recordList" :key="index"> | |||
<p class="item-time">{{dealTime(item.createDate)}}</p> | |||
<div class="item-detail"> | |||
<div class="item-left"> | |||
<span>{{item.name}}</span> | |||
<span>{{dealTime(item.createDate)}}</span> | |||
</div> | |||
<div class="item-right"> | |||
<span>+{{item.creditNum}}</span> | |||
<span>操作人:{{item.operator}}</span> | |||
</div> | |||
</div> | |||
</div> | |||
</van-list> | |||
<div class="picker-bg" v-if="isShowPicker"> | |||
<van-datetime-picker | |||
@confirm="changeTime" | |||
@cancel="isShowPicker=false" | |||
v-model="currentDate" | |||
type="date" | |||
title="选择年月日" | |||
:min-date="minDate" | |||
:max-date="maxDate" | |||
/> | |||
</div> | |||
</div> | |||
</template> | |||
<script type="text/babel"> | |||
import {formatDate} from '@/filters' | |||
// 组件 | |||
export default { | |||
name: 'page-index', | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
isShowPicker: false, | |||
minDate: new Date(1990, 0, 1), | |||
maxDate: new Date(), | |||
currentDate: new Date(), | |||
startTime: formatDate(new Date(),'yyyy-MM-dd'), | |||
endTime: formatDate(new Date(),'yyyy-MM-dd'), | |||
timeType: 'startTime', | |||
pageNum: 1, | |||
recordList: [], | |||
loading: false, | |||
finished: false, | |||
}; | |||
}, | |||
mounted() { | |||
this.getCreditList() | |||
}, | |||
methods: { | |||
doSearch () { | |||
this.pageNum = 1 | |||
this.recordList = [] | |||
this.getCreditList() | |||
}, | |||
loadMore () { | |||
this.pageNum += 1 | |||
this.getCreditList() | |||
}, | |||
dealTime (time) { | |||
return formatDate(new Date(time), 'yyyy-MM-dd'); | |||
}, | |||
showPicker (str) { | |||
this.isShowPicker = true; | |||
this.timeType = str; | |||
this.currentDate = new Date(this[str]) | |||
}, | |||
changeTime (val) { | |||
this[this.timeType] = formatDate(new Date(val),'yyyy-MM-dd'); | |||
this.isShowPicker = false; | |||
}, | |||
/** | |||
* 检查用户是否有权限修改收款账户 | |||
*/ | |||
getCreditList() { | |||
this.loading = true | |||
this.$http.getCreditList({ | |||
method: 'get', | |||
params: { | |||
pageNum: this.pageNum, | |||
pageSize: 10, | |||
startTime: this.startTime + " 00:00:00", | |||
endTime: this.endTime + " 23:59:59", | |||
merchantId: JSON.parse(this.$route.query.userInfo).merchant_id | |||
} | |||
}).then(res => { | |||
if (res.code === 200) { | |||
this.loading = false | |||
this.finished = res.data.list.length === 0 | |||
this.recordList = this.recordList.concat(res.data.list) | |||
} | |||
}) | |||
}, | |||
goBack() { | |||
this.$router.go(-1) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
.floatR { | |||
float: right; | |||
} | |||
@font-face { | |||
font-family: 'iconfont'; /* project id 1353693 */ | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot'); | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg'); | |||
} | |||
.page-home { | |||
background: #f8f8fa; | |||
.back-box { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
z-index: 1000; | |||
width: 100%; | |||
height: 1.3rem; | |||
line-height: 1.3rem; | |||
background: #52A0FD; | |||
color: #fff; | |||
font-size: @fontSize16; | |||
.back-icon { | |||
float: left; | |||
margin: .4rem 0 0 .1rem; | |||
} | |||
} | |||
} | |||
.header-wrap { | |||
width: 100%; | |||
height: 4rem; | |||
position: relative; | |||
margin-bottom: 1rem; | |||
.header-bg { | |||
width: 100%; | |||
height: 4rem; | |||
} | |||
.header-box { | |||
position: absolute; | |||
left: 3.5%; | |||
top: 1.4rem; | |||
width: 93%; | |||
height: 3rem; | |||
background: url('../../assets/images/reviveimg.png') no-repeat; | |||
background-size: 100%; | |||
border-radius: .2rem; | |||
box-shadow: 2px 6px .3rem rgba(0,0,0,.15); | |||
overflow: hidden; | |||
.header-logo { | |||
float: left; | |||
width: 1.7rem; | |||
height: 1.7rem; | |||
margin: .7rem .5rem 0 .5rem; | |||
} | |||
.header-name-box { | |||
float: left; | |||
width: 5.5rem; | |||
margin-top: .7rem; | |||
.header-title { | |||
width: 100%; | |||
height: .75rem; | |||
line-height: .75rem; | |||
color: #333; | |||
font-size: @fontSize16; | |||
text-align: left; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
&:nth-of-type(2) { | |||
color: #999; | |||
} | |||
} | |||
} | |||
.header-detail { | |||
float: right; | |||
width: .7rem; | |||
height: .7rem; | |||
margin-top: 1.2rem; | |||
margin-right: .3rem; | |||
} | |||
} | |||
} | |||
.text-left,.text-right { | |||
float: left; | |||
width: 4.4rem; | |||
height: 2rem; | |||
font-size: @fontSize16; | |||
span { | |||
display: block; | |||
margin-top: .3rem; | |||
&:nth-of-type(1) { | |||
color: #888; | |||
} | |||
} | |||
} | |||
.text-center { | |||
float: left; | |||
width: .5rem; | |||
height: 2rem; | |||
line-height: 2rem; | |||
} | |||
.search-btn { | |||
width: 100%; | |||
float: left; | |||
height:1rem; | |||
background: #51a0fc; | |||
color: #fff; | |||
} | |||
.picker-bg { | |||
width: 100vw; | |||
height: 100vh; | |||
background: rgba(0,0,0,.2); | |||
position: fixed; | |||
left: 0; | |||
top: 0; | |||
z-index: 100; | |||
/deep/ .van-picker { | |||
width: 100%; | |||
position:absolute!important; | |||
bottom: 0; | |||
left: 0; | |||
} | |||
} | |||
.item-record { | |||
width: 100%; | |||
font-size: @fontSize14; | |||
.item-time { | |||
width: 100%; | |||
height: .8rem; | |||
line-height: .8rem; | |||
color: #888; | |||
text-align: left; | |||
padding-left: .4rem; | |||
} | |||
.item-detail { | |||
padding: 0 .4rem; | |||
width: 100%; | |||
height: 2rem; | |||
background: #fff; | |||
.item-left,.item-right { | |||
float: left; | |||
span { | |||
display: block; | |||
margin-top: .4rem; | |||
font-size: @fontSize16; | |||
text-align: left; | |||
&:nth-of-type(1) { | |||
max-width: 6rem; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
} | |||
&:nth-of-type(2) { | |||
margin-top: .2rem; | |||
color: #888; | |||
} | |||
} | |||
} | |||
.item-right { | |||
float: right; | |||
span { | |||
text-align: right; | |||
&:nth-of-type(2) { | |||
font-size: @fontSize14; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,109 @@ | |||
<template> | |||
<div> | |||
<div class="back-box"> | |||
<van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" /> | |||
<span>登陆信息</span> | |||
</div> | |||
<div class='user-info'> | |||
<div class="info-item"> | |||
<span>姓名</span> | |||
<span>{{userInfo.name}}</span> | |||
</div> | |||
<div class="info-item"> | |||
<span>手机号</span> | |||
<span>{{userInfo.phone}}</span> | |||
</div> | |||
<div class="info-item"> | |||
<span>商户名称</span> | |||
<span>{{userInfo.merchant_name}}</span> | |||
</div> | |||
<div class="info-item"> | |||
<span>姓名</span> | |||
<span>{{userInfo.mall_name}}</span> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script type="text/babel"> | |||
// 组件 | |||
export default { | |||
name: 'page-index', | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
userInfo: { | |||
mall_name: '', | |||
merchant_name: '', | |||
phone: '', | |||
service_phone: '', | |||
name: '', | |||
} | |||
}; | |||
}, | |||
mounted() { | |||
console.log(this.userInfo) | |||
this.userInfo = JSON.parse(this.$route.query.userInfo); | |||
}, | |||
methods: { | |||
goBack() { | |||
this.$router.go(-1) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="less" rel="stylesheet/less" > | |||
.floatR { | |||
float: right; | |||
} | |||
@font-face { | |||
font-family: 'iconfont'; /* project id 1353693 */ | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot'); | |||
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg'); | |||
} | |||
.page { | |||
height: 100%; | |||
} | |||
.back-box { | |||
width: 100%; | |||
height: 1.3rem; | |||
line-height: 1.3rem; | |||
background: #52A0FD; | |||
color: #fff; | |||
font-size: @fontSize16; | |||
.back-icon { | |||
float: left; | |||
margin: .4rem 0 0 .1rem; | |||
} | |||
} | |||
.user-info { | |||
padding: .2rem .4rem 0; | |||
.info-item { | |||
width: 100%; | |||
height: 1.1rem; | |||
line-height: 1.1rem; | |||
font-size: @fontSize16; | |||
span { | |||
float: left; | |||
color: #333; | |||
&:nth-of-type(2) { | |||
float: right; | |||
color: #888; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,60 @@ | |||
const path = require('path'); | |||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; | |||
// require('vue-cli-plugin-style-resources-loader') | |||
function resolve(dir) { | |||
return path.join(__dirname, dir) | |||
} | |||
module.exports = { | |||
devServer: { | |||
// open: true, // 是否自动打开浏览器页面 | |||
// host: 'localhost', // 指定使用一个 host,默认是 localhost | |||
port: 8090, // 端口地址 | |||
proxy: { | |||
'/fumaoA': { | |||
target: 'https://admintest.malls.iformall.com/api', | |||
changeOrigin: true, | |||
pathRewrite: { | |||
'^/fumaoA': '' | |||
} | |||
}, | |||
'/fumao': { | |||
target: 'https://b.malls.iformall.com/B', | |||
changeOrigin: true, | |||
pathRewrite: { | |||
'^/fumao': '' | |||
} | |||
}, | |||
} | |||
}, | |||
publicPath: './', // 打包后引用的资源路径 | |||
// outputDir: 'dist', // 打包目录 | |||
configureWebpack: (config) => { // webpack自定义配置 | |||
// 生产环境打包分析体积 | |||
if (process.env.NODE_ENV === 'production' && process.env.npm_config_report) { | |||
return { | |||
plugins: [ | |||
new BundleAnalyzerPlugin() | |||
] | |||
} | |||
} | |||
}, | |||
chainWebpack: config => { // CLI内部webpack配置 | |||
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] | |||
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type))) | |||
}, | |||
} | |||
// 全局样式 变量、函数 | |||
function addStyleResource (rule) { | |||
rule.use('style-resource') | |||
.loader('style-resources-loader') | |||
.options({ | |||
patterns: [ | |||
resolve('src/styles/variables.less'), | |||
resolve('src/styles/mixin.less'), | |||
], | |||
}) | |||
} |