Skip to content

html / poolin_app

Go to a project
Commit 73ad5db5 by jingjie
Options

jingjie

parent bd7f157b
Showing with 254 additions and 19 deletions
package.json
......@@ -5,7 +5,7 @@
"author": "xin3w <xin3w@126.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.16.6.191",
"start": "npm run dev",
"build": "node build/build.js"
},
......
src/assets/less/style2.less
......@@ -69,3 +69,150 @@
}
.descript{padding:0 0.3rem; color: @fontGray;}
}
.notice{
.page-content{
.notice-content{
width: 7.5rem;
.notice-notice{
box-sizing: border-box;
padding: 0.2rem 0.3rem;
.pos(r);
.iconfont{
color:#fff;
font-size: 0.5rem;
.pos(r);
.notice-badge{
display: inline-block;
font-size: 0.2rem;
border: 1px solid #fff;
width: 0.35rem;
height: 0.35rem;
line-height: 0.35rem;
text-align: center;
background: #ff0000;
border-radius: 50%;
color: #fff;
.pos(a);
}
&.icon-xiaoxigonggao{
color: #fff;
.d-ib;
width: 0.89rem;
height: 0.89rem;
line-height: 0.89rem;
.tc;
background: #1b82d2;
border-radius: 50%;
}
}
.notice-right{
box-sizing: border-box;
padding: 0 0 0 0.3rem;
span{
font-size: 0.34rem;
color: #252525;
}
s{
font-size: 0.22rem;
color: #727272;
}
.notice-detail{
.ellipsis-basic;
font-size: 0.28rem;
color: #727272;
}
}
&:after{.line.xb;}
}
.notice-alarm{
box-sizing: border-box;
padding: 0.2rem 0.3rem;
.pos(r);
.iconfont{
color:#fff;
font-size: 0.5rem;
.pos(r);
.notice-badge{
display: inline-block;
font-size: 0.2rem;
border: 1px solid #fff;
width: 0.35rem;
height: 0.35rem;
line-height: 0.35rem;
text-align: center;
background: #ff0000;
border-radius: 50%;
color: #fff;
.pos(a);
}
&.icon-tongyongleibaojing{
color: #fff;
.d-ib;
width: 0.89rem;
height: 0.89rem;
line-height: 0.89rem;
.tc;
background: #ff6600;
border-radius: 50%;
}
}
.notice-right{
box-sizing: border-box;
padding: 0 0 0 0.3rem;
span{
font-size: 0.34rem;
color: #252525;
}
s{
font-size: 0.22rem;
color: #727272;
}
.notice-detail{
.ellipsis-basic;
font-size: 0.28rem;
color: #727272;
}
}
&:after{.line.xb;}
}
}
}
}
.list{
.page-header{
.btn-mark{
padding: 0 15px;
font-size: 0.32rem;
color: #f5f5f9;
}
}
.page-content{
.list-content{
.list-item{
.pos(r);
box-sizing: border-box;
&:after{.line.xb;}
&.unread{
p{
font-size: 0.32rem;
color: #252525;
}
span{
font-size: 0.22rem;
color: #727272;
}
}
&.read{
p{
font-size: 0.32rem;
color: #a9b2bf;
}
span{
font-size: 0.22rem;
color: #a9b2bf;
}
}
}
}
}
}
src/components/Notice/index.vue
<template>
<div class="">
{{msg}}
<button @click="goNoticeList">跳转到通知列表</button>
<div class="page notice">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">通知中心</div>
</div>
<div class="page-content">
<div class="notice-content">
<div class="notice-notice" flex="dir:left box:first" @click="goNoticeList">
<span class="iconfont icon-xiaoxigonggao">
<b class="notice-badge">{{notice.num}}</b>
</span>
<div class="notice-right" flex="dir:top main:justify">
<div flex="dir:left box:mean cross:center">
<span class="f-tal">
公告
</span>
<s class="f-tar">
{{notice.time}}
</s>
</div>
<div flex-box="0" class="notice-detail">{{notice.title}}</div>
</div>
</div>
<div class="notice-alarm" flex="dir:left box:first" @click="goNoticeList">
<span class="iconfont icon-tongyongleibaojing">
<b class="notice-badge">{{alarm.num}}</b>
</span>
<div class="notice-right" flex="dir:top main:justify">
<div flex="dir:left box:mean cross:center">
<span class="f-tal">
报警
</span>
<s class="f-tar">
{{alarm.time}}
</s>
</div>
<div flex-box="0" class="notice-detail">{{alarm.title}}</div>
</div>
</div>
</div>
<!--<button @click="goNoticeList">跳转到通知列表</button>-->
</div>
</div>
</template>
<script>
......@@ -9,16 +48,31 @@ export default {
name: 'dashboard',
data() {
return {
msg: '通知中心'
notice: {
time: '2017-11-05 11:33',
num: '15',
title:'矿池关于比特币现金版本升级及更名的通知'
},
alarm: {
time: '2017-11-05 11:33',
num: '5',
title:'活跃矿机数下降到1500台'
}
}
},
mounted() {
},
methods: {
goBack() {
this.$router.go(-1);
},
goNoticeList() {
this.$router.push('/noticeList')
}
},
// goAlarmList() {
// this.$router.push('/alarmList')
// }
}
}
......
src/components/Notice/list.vue
<template>
<div class="">
{{msg}}
<button @click="goNoticeShow">跳转到通知详情</button>
<div class="page list">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">通知列表</div>
<div class="btn-mark" @click="markAllList">全标已读</div>
</div>
<div class="page-content">
<ul class="list-content">
<li v-for="(notice,index) in noticeList" :key="notice.id" class="list-item p30" :class="notice.status=='unread'?'unread':'read'" @click="goNoticeShow(index) ">
<p>{{notice.title}}</p>
<span>{{notice.time}}</span>
</li>
</ul>
</div>
<!--{{msg}}-->
<!--<button @click="goNoticeShow">跳转到通知详情</button>-->
</div>
</template>
<script>
......@@ -9,15 +22,38 @@ export default {
name: 'noticeList',
data() {
return {
msg: '通知列表'
noticeList:[{
id: 0,
time: '2017-11-05 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'unread'
},{
id: 1,
time: '2017-11-04 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'read'
},{
id: 2,
time: '2017-11-04 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'read',
isRead: false
}],
}
},
mounted() {
},
methods: {
goNoticeShow() {
this.$router.push('/NoticeShow')
goBack() {
this.$router.go(-1);
},
goNoticeShow(index) {
this.noticeList[index].status='read';
// this.$router.push('/NoticeShow');
},
markAllList() {
}
}
}
......
src/components/Settings/DefaultCoin.vue
......@@ -2,7 +2,7 @@
<div class="page default-coin">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">{{msg}}</div>
<div class="title">设置默认币种</div>
</div>
<div class="page-content">
<el-form :model="createForm" :rules="createRules" ref="createForm">
......@@ -28,7 +28,6 @@ export default {
name: 'defaultCoin',
data() {
return {
msg: '设置默认币种',
createForm: {
defaultCoin: ""
},
......
src/components/Settings/Language.vue
......@@ -2,7 +2,7 @@
<div class="page language">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">{{msg}}</div>
<div class="title">语言设置</div>
</div>
<div class="page-content top">
<div class="language-content">
......@@ -46,7 +46,6 @@ export default {
name: 'language',
data() {
return {
msg: '语言设置',
index: 0
}
},
......
src/components/Settings/index.vue
<template>
<div class="page settings">
<div class="page-header" flex="main:justify cross:center">
<div class="title">{{msg}}</div>
<div class="title">设置页面</div>
</div>
<div class="page-content bottom">
<div class="setting-content">
......@@ -21,7 +21,7 @@
</div>
<div class="mt40 settings-group notice-content">
<div class="settings-title">通知公告</div>
<mt-cell title="通知中心" is-link>
<mt-cell title="通知中心" is-link to="/notice">
<span class="notice-badge">2</span>
</mt-cell>
</div>
......@@ -65,7 +65,7 @@ export default {
},
data() {
return {
msg: '设置页面'
}
},
mounted() {
......
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 sign in to comment