Commit 53b72ada by LinChengbiao

增加:首页(头部标题、搜索框、热度榜、概览、月增)

parent 4e427387
{"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\wepy.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-async-function\\index.js":1523427808000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\index.js":1522738267000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\index.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\index.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-promise\\lib\\index.js":1458072063000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\app.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\page.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\component.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\event.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\base.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\util.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\mixin.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-async-function\\global.js":1517302333000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\promise-polyfill\\promise.js":1511627065000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\regenerator-runtime\\runtime.js":1493390741000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\connect\\index.js":1525770681000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\store.js":1522738267000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\helpers\\index.js":1522738268000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\combineActions.js":1532566050000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\createAction.js":1532566050000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\createActions.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\createCurriedAction.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\handleAction.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\handleActions.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\createStore.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\combineReducers.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\bindActionCreators.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\applyMiddleware.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\compose.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\utils\\warning.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\flux-standard-action\\lib\\index.js":1454443066000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\native.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\invariant\\browser.js":1520965460000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isFunction.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isSymbol.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isEmpty.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\toString.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isString.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\constants.js":1532566050000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\identity.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isNull.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isPlainObject.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isArray.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isNil.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\getLastElement.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\camelCase.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\arrayToObject.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\flattenActionMap.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\unflattenActionCreators.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.curry\\index.js":1471109591000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isUndefined.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\reduce-reducers\\dist\\index.js":1536657658718,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isMap.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\ownKeys.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\flattenReducerMap.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\isPlainObject.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\symbol-observable\\lib\\index.js":1516988507000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.isplainobject\\index.js":1435677344000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.camelcase\\index.js":1471109624000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\flattenWhenNode.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\hasGeneratorInterface.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_baseGetTag.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_getPrototype.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\isObjectLike.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\symbol-observable\\lib\\ponyfill.js":1516988507000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash._basefor\\index.js":1452676959000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.isarguments\\index.js":1471109416000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.keysin\\index.js":1432605162000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_Symbol.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_getRawTag.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_objectToString.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_overArg.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.isarray\\index.js":1435677344000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_root.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_freeGlobal.js":499162500000}
\ No newline at end of file
...@@ -20,14 +20,17 @@ ...@@ -20,14 +20,17 @@
## 注意事项 ## 注意事项
* **团队开发**
* 请规范代码风格与原项目一致
* 请在分支上进行开发测试,最后并入 `master`
* **新增页面** * **新增页面**
* `src/pages/temp.wpy` 文件为页面模板文件,新建页面直接复制这个然后修改就可以了。(一般情况下,改成如下形式就可以自由添加内容了) * `src/pages/temp.wpy` 文件为页面模板文件,新建页面直接复制这个然后修改就可以了。(一般情况下,改成如下形式就可以自由添加内容了)
* 新增的页面必须在 `src/app.wpy` 中配置路径,否则会报错。 * 新增的页面必须在 `src/app.wpy` 中配置路径,否则会报错。
* 需要注意 `页面``组件` 的声明方式有所不同: * 需要注意 `页面``组件` 的声明方式有所不同:
* 页面声明 `export default class PageName extends wepy.page` * 页面声明 `export default class pageName extends wepy.page`
* 组件声明 `export default class ComponentName extends wepy.component` * 组件声明 `export default class componentName extends wepy.component`
* 名称(`PageName``ComponentName`)**首字母**要大写 * `pageName``componentName` 是自定义的
* `PageName``ComponentName` 是自定义的
```html ```html
<!-- 假如文件名是 test.wpy 则改成如下形式 --> <!-- 假如文件名是 test.wpy 则改成如下形式 -->
...@@ -40,18 +43,34 @@ ...@@ -40,18 +43,34 @@
<script> <script>
import wepy from 'wepy' import wepy from 'wepy'
export default class Test extends wepy.page { export default class test extends wepy.page {
onLoad () { onLoad () {
console.log('test') console.log('test')
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.testWpy{} .testWpy{}
</style> </style>
``` ```
* **代码高亮**
* 安装 `vue` 语法高亮插件,将 `.wpy` 文件打开后设置语言为 `Vue Component`
![prtsc_001.png](./README_STATIC/prtsc_001.png)
* **编译坑点**
* 只有 `src` 中的内容会被编译进 `dist`
* `src` 中文件被**删除****重命名**`dist` 中文件不会发生改变,而是生成新文件(这种情况经常导致修改的东西不生效,因为它使用的是旧文件,关闭 `微信web开发者工具` ,删除 `dist` 目录,重新 `npm run dev` 编译一次就好了)
* 例子: `src` 下放入图片 `a.jpg` , 编译后 `dist` 目录下拷贝(生成) `a.jpg`,将 `src/a.jpg` 改为 `src/b.jpg` 后, `dist` 目录下同时有 `a.jpg``b.jpg`
* 基于以上问题,为了使发布的小程序更干净,提交前需要删除 `dist` 进行一次重新编译。
* 遇到不明bug也可尝试删除 `dist` 重新编译,然后你会神奇的发现bug消失了。
* **真机调试坑点**
* 如果发现某一个元素内文字一直是首行缩进(非 text-indent 情况)可以尝试把元素内的内容写成一行:
![prtsc_001.png](./README_STATIC/prtsc_002.png)
![prtsc_001.png](./README_STATIC/prtsc_003.png)
--- ---
## 参考文档 ## 参考文档
......
...@@ -20,10 +20,10 @@ ...@@ -20,10 +20,10 @@
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-actions": "^2.2.1", "redux-actions": "^2.2.1",
"redux-promise": "^0.5.3", "redux-promise": "^0.5.3",
"wepy-redux": "^1.5.3",
"wepy": "^1.6.0", "wepy": "^1.6.0",
"wepy-async-function": "^1.4.4", "wepy-async-function": "^1.4.6",
"wepy-com-toast": "^1.0.2" "wepy-com-toast": "^1.0.2",
"wepy-redux": "^1.5.3"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^7.2.1", "babel-eslint": "^7.2.1",
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
"eslint-plugin-promise": "^3.5.0", "eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^2.0.1", "eslint-plugin-standard": "^2.0.1",
"wepy-compiler-babel": "^1.5.1", "wepy-compiler-babel": "^1.5.1",
"wepy-compiler-less": "^1.3.10", "wepy-compiler-less": "^1.3.12",
"wepy-compiler-sass": "^1.3.12", "wepy-compiler-sass": "^1.3.12",
"wepy-eslint": "^1.5.3" "wepy-eslint": "^1.5.3"
} }
......
<style lang="less">
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
</style>
<script> <script>
import wepy from 'wepy' import wepy from 'wepy'
import 'wepy-async-function' import 'wepy-async-function'
import { setStore } from 'wepy-redux' import { setStore } from 'wepy-redux'
import configStore from './store' import configStore from './store'
import './static/js/Math_Plus.js' // Math对象扩展
const store = configStore() const store = configStore()
setStore(store) setStore(store)
...@@ -22,8 +12,8 @@ setStore(store) ...@@ -22,8 +12,8 @@ setStore(store)
export default class extends wepy.app { export default class extends wepy.app {
config = { config = {
pages: [ pages: [
'pages/login',
'pages/home', 'pages/home',
'pages/login',
'pages/temp' 'pages/temp'
], ],
window: { window: {
...@@ -74,3 +64,9 @@ export default class extends wepy.app { ...@@ -74,3 +64,9 @@ export default class extends wepy.app {
} }
} }
</script> </script>
<style lang="scss">
/* 公共样式 */
@import "./static/css/_public.scss";
</style>
<template>
<view class="homeHeaderWpy">
携程品牌事件库
</view>
</template>
<script>
import wepy from 'wepy'
export default class homeHeader extends wepy.component {
onLoad () {
// console.log('homeHeader')
}
}
</script>
<style lang="scss" scoped>
.homeHeaderWpy{
background-color: #3B4F81;
color: #fff;
line-height: 90rpx;
text-align: center;
font-size: 40rpx;
}
</style>
<template>
<view class="searchInputWpy">
<input type="text" name="" value="{{searchWord}}" @input="input" />
<image src="../../static/img/i_search.png" class="searchBtn" @tap="toSearch()" />
</view>
</template>
<script>
import wepy from 'wepy'
export default class searchInput extends wepy.component {
props = {
searchWord: {
type: String,
default: '',
twoWay: true
}
}
data = {}
onLoad () {
// console.log('searchInput')
// console.log(this.searchWord)
}
methods = {
toSearch () {
this.$emit('toSearch')
},
input (e) {
this.searchWord = e.detail.value
}
}
}
</script>
<style lang="scss" scoped>
.searchInputWpy{
height: 70rpx;
position: relative;
input{
display: block;
width: 100%;
height: 100%;
border-radius: 35rpx;
border: 2rpx solid #A1AAC4;
background-color: #F5F6FA;
padding: 0 20rpx;
padding-right: 90rpx;
}
.searchBtn{
display: block;
width: 80rpx;
height: 70rpx;
position: absolute;
top: 0;
right: 0;
padding: 10rpx;
padding-right: 20rpx;
}
}
</style>
<template>
<view class="heatListWpy homePageModule">
<view class="title">热度榜</view>
<view class="content">
<repeat for="{{ list }}" item="n" index="i" key="i">
<view class="item">
<view class="serial">{{ i + 1 }}.</view>
<view class="name mult-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</view>
<view class="icon">
<image src="../../static/img/i_arrow_{{ i % 2 ? 'up' : 'down' }}.png" />
</view>
<view class="value {{ i % 2 ? 'up' : 'down' }}">
<view>{{ mockValue[i] }}%</view>
</view>
</view>
</repeat>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class heatList extends wepy.component {
data = {
list: [1, 2, 3, 4, 5],
mockValue: [
parseInt(Math.random() * 10000) / 10,
parseInt(Math.random() * 10000) / 10,
parseInt(Math.random() * 10000) / 10,
parseInt(Math.random() * 10000) / 10,
parseInt(Math.random() * 10000) / 10
]
}
onLoad () {
console.log('heatList')
}
methods = {
}
}
</script>
<style lang="scss" scoped>
.heatListWpy{
border: 1px solid #D6D7DA;
border-radius: 8rpx;
.title{
border-bottom: 1px solid #D6D7DA;
}
.content{
padding: 0 28rpx;
.item{
display: flex;
line-height: 1.4;
height: calc(80rpx + 16rpx * 2);
align-items: center;
padding: 16rpx 0;
.serial{
height: 100%;
}
.name{
height: 100%;
-webkit-line-clamp: 2;
padding-right: 20rpx;
}
.icon{
height: 100%;
display: flex;
align-items: center;
image{
width: 20rpx;
height: 40rpx;
}
}
.value{
height: 100%;
display: flex;
align-items: center;
text-align: right;
font-size: 32rpx;
view{
width: 120rpx;
}
&.up{ color: #F56386; }
&.down{ color: #5CB85C; }
}
&:not(:first-child){
border-top: 1px solid #D6D7DA;
}
}
}
}
</style>
<template>
<view class="monthlyIncreaseWpy homePageModule">
<repeat for="{{ dataInfo }}" item="n" index="i" key="i">
<view class="item">
<view class="name">{{ n.name }}</view>
<view class="value">{{ n.value }}</view>
</view>
</repeat>
<view class="btns">
<view class="btn" @tap="showAllEvents">查看全部事件</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class monthlyIncrease extends wepy.component {
data = {
dataInfo: [
{ name: '上月新增事件', value: Math.format.thousandBitSymbol(87) },
{ name: '本月新增事件', value: Math.format.thousandBitSymbol(56) }
]
}
onLoad () {
console.log('monthlyIncrease')
}
methods = {
showAllEvents () {
console.log('showAllEvents')
}
}
}
</script>
<style lang="scss" scoped>
.monthlyIncreaseWpy{
background-color: #F46485;
border-radius: 8rpx;
overflow: hidden;
color: #fff;
font-size: 32rpx;
.item, .btns{
padding: 14rpx 26rpx;
}
.item{
display: flex;
justify-content: space-between;
line-height: 64rpx;
&:nth-of-type(even){
background-color: #E35C7C;
}
}
.btns{
.btn{
width: 100%;
height: 64rpx;
line-height: 62rpx;
border-radius: 32rpx;
border: 1rpx solid #fff;
text-align: center;
transition: all .2s ease;
&:active{
transition: all .2s ease .2;
background-color: #fff;
color: #F46485;
}
}
}
}
</style>
<template>
<view class="overviewWpy homePageModule">
<view class="title">概览</view>
<view class="content">
<view class="top">
<view class="value">78</view>
<view>事件总数</view>
</view>
<view class="bottom">
<repeat for="{{ dataInfo }}" item="n" index="i" key="i">
<view class="item">
<view class="name">{{ n.name }}</view>
<view class="value">{{ n.value }}</view>
</view>
</repeat>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class overview extends wepy.component {
data = {
dataInfo: [
{ name: '影响力均值', value: Math.format.thousandBitSymbol(6789) },
{ name: '峰值平均传播速度', value: '12条/小时' },
{ name: '达到峰值平均用时', value: '22.5小时' }
]
}
onLoad () {
}
}
</script>
<style lang="scss" scoped>
.overviewWpy{
background-color: #49619F;
border-radius: 8rpx;
overflow: hidden;
color: #fff;
font-size: 32rpx;
.top{
padding: 20rpx 0;
text-align: center;
.value{
margin-bottom: 20rpx;
font-size: 52rpx;
font-weight: lighter;
}
}
.bottom{
background-color: #445A93;
.item{
display: flex;
justify-content: space-between;
padding: 20rpx 24rpx;
}
}
}
</style>
<template> <template>
<view class="homeWpy"> <view class="homeWpy">
home
<homeHeader />
<view class="main">
<searchInput class="item" :searchWord.sync="searchWord" @toSearch="toSearch" />
<!-- 热度榜 -->
<heatList class="item" />
<!-- 概览 -->
<overview class="item" />
<!-- 月增 -->
<monthlyIncrease class="item" />
</view>
</view> </view>
</template> </template>
<script> <script>
import wepy from 'wepy' import wepy from 'wepy'
import homeHeader from '@/components/common/homeHeader' // header头
import searchInput from '@/components/common/searchInput' // 搜索框
import heatList from '@/components/home/heatList' // 热度榜
import overview from '@/components/home/overview' // 概览
import monthlyIncrease from '@/components/home/monthlyIncrease' // 月增
export default class Home extends wepy.page { export default class home extends wepy.page {
components = {
homeHeader,
searchInput,
heatList,
overview,
monthlyIncrease
}
data = {
searchWord: ''
}
onLoad () { onLoad () {
console.log('home') // console.log('home')
}
events = {
toSearch () {
console.log(this.searchWord)
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.homeWpy{} .homeWpy{
.main{
padding: 26rpx;
.item{
&:not(:first-child){
margin-top: 26rpx;
}
}
}
}
</style> </style>
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
<script> <script>
import wepy from 'wepy' import wepy from 'wepy'
export default class Login extends wepy.page { export default class login extends wepy.page {
onLoad () { onLoad () {
console.log('login') console.log('login')
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.loginWpy{} .loginWpy{}
</style> </style>
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
<script> <script>
import wepy from 'wepy' import wepy from 'wepy'
export default class Temp extends wepy.page { export default class temp extends wepy.page {
onLoad () { onLoad () {
console.log('temp') console.log('temp')
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.tempWpy{} .tempWpy{}
</style> </style>
/* 公共样式 */
page, view, input, image{
border:0rpx;
margin:0rpx;
padding: 0rpx;
box-sizing: border-box;
outline: none;
list-style-type: none;
text-decoration: none;
font: inherit;
line-height: inherit;
color: inherit;
background-color: transparent;
vertical-align: inherit;
text-align: inherit;
}
page{
font-size: 28rpx;
font-weight: 400;
font-family: 'Microsoft YaHei', 'Avenir', 'Monaco', 'Consolas';
font-style: normal;
line-height: 1;
vertical-align: baseline;
text-align: left;
color: #202020;
}
image{
width: 40rpx;
height: 40rpx;
}
.clear:after{
display: block;
content: "";
clear: both;
}
/* 文本溢出显示省略号 */
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 多行文本溢出显示省略号 */
.mult-ellipsis{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* 文字自动两端对齐 */
.justify {
text-align: justify;
text-justify: distribute-all-lines; /* ie6-8 */
text-align-last: justify; /* ie9 */
-moz-text-align-last: justify; /* ff */
-webkit-text-align-last: justify; /* chrome 20+ */
}
// ----------------------------------------- 分割线,上面是预设样式,下面是定制样式 -----------------------------------------
// 首页模块样式
.homePageModule{
.title{
line-height: 70rpx;
font-size: 36rpx;
padding: 0 28rpx;
}
.content{}
}
// 求和
Math.sum = (...args) => args.reduce((n, m) => n + m)
// 数字格式化
Math.format = {
// 千位符号
thousandBitSymbol: (num) => (num || 0).toString().replace(/\d+/, n => n.replace(/(\d)(?=(\d{3})+$)/g, '$1,')),
// 前导零
leadingZero: (num) => (num < 10 ? '0' : '') + num,
// 强制保留指定位数的小数
round: (num, retention) => {
num = num || 0
if (retention === undefined) return num.toString()
let digit = 10 ** retention
let roundNum = (Math.round(num * digit) / digit).toString()
let splitArr = roundNum.split('.')
if (splitArr.length === 2) {
splitArr[1] = splitArr[1] + Array(retention - splitArr[1].length).fill('0').join('')
} else {
splitArr.push(Array(retention).fill('0').join(''))
}
return splitArr.join('.')
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment