['设置中心']
This commit is contained in:
209
pages/index/info.vue
Normal file
209
pages/index/info.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 区块信息 -->
|
||||
<view class="info-back"></view>
|
||||
<view class="info-list">
|
||||
<view class="flex" v-for="(item, index) in assetsList" :key="index">
|
||||
<view class="item-name ellipsis">
|
||||
<image class="icon" :src="item.icon" mode="widthFix" />
|
||||
{{ item.name || '-' }}
|
||||
</view>
|
||||
<view class="item-label">
|
||||
<view class="number ellipsis">{{ item.balance || '0.00' }}</view>
|
||||
<view class="unit ellipsis">{{ item.symbol || '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 区块链变化 -->
|
||||
<view class="movements">
|
||||
<view class="title">区块链变化</view>
|
||||
<view class="chart">
|
||||
<l-f2 ref="chartChange"></l-f2>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 区块记录 -->
|
||||
<view class="chain-record">
|
||||
<view class="title">区块记录</view>
|
||||
<chain-list :list="chainList" @onChain="chainInfo"/>
|
||||
</view>
|
||||
<!-- 底部安全区 -->
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chain, situation } from '@/apis/interfaces/chain'
|
||||
import chainList from '@/components/chain/chain'
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||
export default {
|
||||
components: {
|
||||
chainList,
|
||||
lF2
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
time: '2021-08-08 00:00:00',
|
||||
value: 30
|
||||
}, {
|
||||
time: '2021-08-09 00:10:00',
|
||||
value: 36
|
||||
}, {
|
||||
time: '2021-08-10 00:12:00',
|
||||
value: 38
|
||||
}, {
|
||||
time: '2021-08-11 10:32:00',
|
||||
value: 40
|
||||
}, {
|
||||
time: '2021-08-13 12:30:00',
|
||||
value: 40
|
||||
}, {
|
||||
time: '2021-08-14 11:02:00',
|
||||
value: 41
|
||||
}, {
|
||||
time: '2021-08-15 10:02:00',
|
||||
value: 41
|
||||
}],
|
||||
assetsList: [],
|
||||
chainList: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
Promise.all([chain(), situation()]).then(res => {
|
||||
this.chainList = res[0]
|
||||
this.assetsList = res[1].assets
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: 'err in chain/info.vue ' + err
|
||||
})
|
||||
})
|
||||
this.$refs.chartChange.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.data, {
|
||||
time: {
|
||||
type: 'timeCat',
|
||||
tickCount: 3,
|
||||
range: [ 0, 1 ]
|
||||
},
|
||||
value: {
|
||||
tickCount: 5,
|
||||
min: 0
|
||||
}
|
||||
});
|
||||
chart.axis('time', {
|
||||
label: function label(text, index, total) {
|
||||
const textCfg = {};
|
||||
if (index === 0) {
|
||||
textCfg.textAlign = 'left';
|
||||
} else if (index === total - 1) {
|
||||
textCfg.textAlign = 'right';
|
||||
}
|
||||
return textCfg;
|
||||
}
|
||||
});
|
||||
chart.tooltip({
|
||||
showCrosshairs: true
|
||||
});
|
||||
chart.area()
|
||||
.position('time*value')
|
||||
.color('l(90) 0:#009b69 1:#f7f7f7')
|
||||
.shape('smooth');
|
||||
chart.line()
|
||||
.position('time*value')
|
||||
.color('l(90) 0:#009b69 1:#f7f7f7')
|
||||
.shape('smooth');
|
||||
chart.render();
|
||||
return chart;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 区块详情
|
||||
chainInfo(e){
|
||||
uni.navigateTo({
|
||||
url: './deal?hash=' + e.hash
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 背景
|
||||
.info-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to bottom, #009B69, #00562d);
|
||||
}
|
||||
|
||||
// 区块信息
|
||||
.info-list {
|
||||
padding: 0 $padding;
|
||||
|
||||
.flex {
|
||||
margin: $margin * 2 $margin/2;
|
||||
background-color: white;
|
||||
border-radius: $radius;
|
||||
padding: $padding * 2;
|
||||
box-shadow: 0 0 2rpx 2rpx rgba($color: #000000, $alpha: .02);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item-name {
|
||||
width: 50%;
|
||||
font-size: $title-size;
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 5rpx;
|
||||
margin-right: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
.item-label {
|
||||
width: 50%;
|
||||
padding-left: $padding;
|
||||
text-align: right;
|
||||
|
||||
.number {
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 区块链信息
|
||||
.chain-record,
|
||||
.movements {
|
||||
padding: $padding;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: $title-size;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.movements {
|
||||
.chart {
|
||||
background-color: white;
|
||||
margin: $margin/2;
|
||||
height: 350rpx;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user