能量球
This commit is contained in:
唐明明
@@ -1,483 +1,266 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 水晶获得公告 -->
|
|
||||||
<view class="notice" v-if="notice.length >= 1">
|
|
||||||
<swiper class="notice-swiper" :vertical="true" autoplay circular>
|
|
||||||
<swiper-item v-for="(item, index) in notice" :key="index">
|
|
||||||
<view class="notice-item">
|
|
||||||
<image class="notice-cover" :src="item.avatar" mode="aspectFill"></image>
|
|
||||||
<view class="notice-title ellipsis">{{item.nickname}} {{item.title}} {{item.amount}}</view>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
<!-- 账户余额 -->
|
<!-- 账户余额 -->
|
||||||
<view class="info">
|
<view class="total">
|
||||||
<view class="info-number">
|
<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>能量球 99</view>
|
||||||
<image class="number-background number-rotate" src="@/static/background/chain-back-01.png" />
|
<view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>能量碎片 11</view>
|
||||||
<view class="info-content webkit-box">
|
</view>
|
||||||
<view class="text">{{isAuth ? '持有原石量': '恒量发行原石量'}}<uni-icons class="help-icon" @click="showHelp('occ')" type="help-filled" size="18" color="#fff" /></view>
|
<!-- 矿机 -->
|
||||||
<view class="number">{{occ}}</view>
|
<view class="ore">
|
||||||
<view class="login" @click="$Router.push({name: 'Login'})" v-if="!isAuth">立即登录</view>
|
<image class="ore-back" src="@/static/background/chain-back-00.png" mode="widthFix"></image>
|
||||||
<view class="login" @click="openWallet" v-else>我的钱包</view>
|
<view class="ball">
|
||||||
</view>
|
<view class="shadow"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="ore-lists">
|
||||||
<!-- 公告信息 -->
|
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
|
||||||
<!-- <view class="increase">今日消费100元，预计原石单价增长0.1%</view> -->
|
<block v-if="item.amount !== null">
|
||||||
<!-- 平台概况 -->
|
<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
|
||||||
<view class="situation">
|
<view class="text">能量碎片{{ item.amount || '-'}}</view>
|
||||||
<view class="header">
|
</block>
|
||||||
<view class="header-item">
|
|
||||||
<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="#009b69" /></view>
|
|
||||||
<view class="number ellipsis">{{ occBalance }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="header-item">
|
|
||||||
<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="#009b69" /></view>
|
|
||||||
<view class="number ellipsis">{{ yesterdayCrystal }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="header-item">
|
|
||||||
<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="#009b69" /></view>
|
|
||||||
<view class="number ellipsis">{{ blockHeight }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="header-item">
|
|
||||||
<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="#009b69" /></view>
|
|
||||||
<view class="number ellipsis">{{ gain }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="header-item">
|
|
||||||
<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="#009b69" /></view>
|
|
||||||
<view class="number ellipsis">{{ nodeNumber }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 节点信息 -->
|
|
||||||
<view class="node-info">
|
|
||||||
<view class="node-item">
|
|
||||||
<view class="title">轻节点</view>
|
|
||||||
<view class="number ellipsis">{{occs.light || '-'}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="node-item">
|
|
||||||
<view class="title">合作节点</view>
|
|
||||||
<view class="number ellipsis">{{occs.cooperation || '-'}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="node-item">
|
|
||||||
<view class="title">主节点</view>
|
|
||||||
<view class="number ellipsis">{{occs.main || '-'}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="node-item">
|
|
||||||
<view class="title">超级节点</view>
|
|
||||||
<view class="number ellipsis">{{occs.super || '-'}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="node-item">
|
|
||||||
<view class="title">运营节点</view>
|
|
||||||
<view class="number ellipsis">{{occs.operating || '-'}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="node-item">
|
|
||||||
<view class="title">技术节点</view>
|
|
||||||
<view class="number ellipsis">{{occs.technology || '-'}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 平台盈利额，原石数量 -->
|
|
||||||
<view class="chart">
|
|
||||||
<view class="title">平台累计营业额和原石价值走势图</view>
|
|
||||||
<view class="chart-f2">
|
|
||||||
<l-f2 ref="chartChange"></l-f2>
|
|
||||||
</view>
|
</view>
|
||||||
|
<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
|
||||||
|
<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
|
||||||
|
<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
|
||||||
|
</navigator>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 任务分类 -->
|
||||||
|
<scroll-view class="task-block" scroll-x="true">
|
||||||
|
<view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
|
||||||
|
<view class="text">{{ item.remark }}</view>
|
||||||
|
<view class="icon">
|
||||||
|
<image :src="item.cover" />
|
||||||
|
</view>
|
||||||
|
<view class="title">{{ item.title }}</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { occ } from '@/apis/interfaces/chain'
|
|
||||||
import { certified, security } from '@/apis/interfaces/index'
|
|
||||||
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 {
|
export default {
|
||||||
components: {
|
|
||||||
lF2
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
occs: {},
|
crystalArr : [],
|
||||||
blockHeight: 0,
|
categoryArr : []
|
||||||
occBalance: 0,
|
|
||||||
occ: 0,
|
|
||||||
yesterdayCrystal: 0,
|
|
||||||
gain: 0,
|
|
||||||
nodeNumber: 0,
|
|
||||||
notice: [],
|
|
||||||
isAuth: false,
|
|
||||||
helpToast: {
|
|
||||||
occ: '恒量发行原石量',
|
|
||||||
occBalance: '平台原石量',
|
|
||||||
yesterdayCrystal: '昨日瓜分水晶',
|
|
||||||
blockHeight: '区块链高度',
|
|
||||||
gain: '平台累计盈利额',
|
|
||||||
nodeNumber: '已开通节点数'
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
},
|
|
||||||
onShow() {
|
|
||||||
if(this.$store.state.token != '') this.isAuth = true
|
|
||||||
this.getOcc()
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
// 求助信息
|
|
||||||
showHelp(type) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '提示',
|
|
||||||
content: this.helpToast[type],
|
|
||||||
showCancel: false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 原石钱包
|
|
||||||
openWallet(){
|
|
||||||
Promise.all([certified(), security()]).then(res=> {
|
|
||||||
let certified = res[0],
|
|
||||||
security = res[1]
|
|
||||||
if(!certified){
|
|
||||||
uni.showModal({
|
|
||||||
title: '提示',
|
|
||||||
content: '您还为完成个人认证，无法激活您的钱包',
|
|
||||||
confirmText: '去认证',
|
|
||||||
confirmColor: '#009B69',
|
|
||||||
cancelColor: '#666666',
|
|
||||||
cancelText: '稍后再说',
|
|
||||||
success: res=> {
|
|
||||||
if(res.confirm) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/certification/personal'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if(!security) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '激活提示',
|
|
||||||
content: '您的钱包未激活，是否立即导出助记词并激活您的钱包?',
|
|
||||||
confirmText: '去激活',
|
|
||||||
confirmColor: '#009B69',
|
|
||||||
cancelColor: '#666666',
|
|
||||||
cancelText: '稍后再说',
|
|
||||||
success: res=> {
|
|
||||||
if(res.confirm) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/wallet/add'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/wallet/property'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// occ信息
|
|
||||||
getOcc(){
|
|
||||||
occ().then(res => {
|
|
||||||
this.occs = res.occs
|
|
||||||
this.yesterdayCrystal = res.yesterday_crystal
|
|
||||||
this.occ = res.occ
|
|
||||||
this.occBalance = res.occ_balance
|
|
||||||
this.blockHeight = res.block_height
|
|
||||||
this.gain = res.gain
|
|
||||||
this.nodeNumber = res.node_number
|
|
||||||
this.notice = res.notice
|
|
||||||
if(res.help_toast) this.helpToast = res.help_toast
|
|
||||||
this.showCartc(res.movements)
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 绘制图表
|
|
||||||
showCartc(data){
|
|
||||||
// 图表信息
|
|
||||||
this.$refs.chartChange.init(config => {
|
|
||||||
config.appendPadding = [10, 15, 10, 15]
|
|
||||||
|
|
||||||
const chart = new F2.Chart(config);
|
|
||||||
chart.source(data, {
|
|
||||||
date: {
|
|
||||||
range: [0, 1],
|
|
||||||
type: 'timeCat',
|
|
||||||
mask: 'MM-DD'
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
tickCount: 5
|
|
||||||
}
|
|
||||||
});
|
|
||||||
chart.axis('time', {
|
|
||||||
line: null,
|
|
||||||
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.axis('tem', {
|
|
||||||
grid: function grid(text) {
|
|
||||||
if (text === '0%') {
|
|
||||||
return {
|
|
||||||
lineDash: null,
|
|
||||||
lineWidth: 1
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
chart.tooltip({
|
|
||||||
showCrosshairs: true
|
|
||||||
});
|
|
||||||
chart.legend({
|
|
||||||
position: 'bottom',
|
|
||||||
offsetY: 0,
|
|
||||||
offsetX: 30
|
|
||||||
});
|
|
||||||
chart.area()
|
|
||||||
.position('date*value')
|
|
||||||
.color('name', [ '#009b69', '#9f8052' ])
|
|
||||||
.shape('smooth')
|
|
||||||
chart.line()
|
|
||||||
.position('date*value')
|
|
||||||
.color('name', [ '#009b69', '#9f8052' ])
|
|
||||||
.shape('smooth', name=> {
|
|
||||||
if (name === '预期收益率') {
|
|
||||||
return 'line';
|
|
||||||
}
|
|
||||||
if (name === '实际收益率') {
|
|
||||||
return 'dash';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
chart.render();
|
|
||||||
return chart;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 气泡漂浮 */
|
/* 星球旋转 */
|
||||||
.number-float{
|
.ball{
|
||||||
|
position: absolute;
|
||||||
|
height: 480rpx;
|
||||||
|
width: 480rpx;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -240rpx;
|
||||||
|
margin-left: -240rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
background: url(/static/background/chain-back-02.png) repeat-x;
|
||||||
|
background-size: auto 100%;
|
||||||
|
-webkit-animation: move-map 30s infinite linear;
|
||||||
|
-moz-animation: move-map 30s infinite linear;
|
||||||
|
-o-animation: move-map 30s infinite linear;
|
||||||
|
-ms-animation: move-map 30s infinite linear;
|
||||||
|
animation: move-map 30s infinite linear;
|
||||||
|
box-shadow: 0 0 50rpx 50rpx rgba(31,25,34, .2);
|
||||||
|
}
|
||||||
|
.shadow{
|
||||||
|
position: absolute;
|
||||||
|
top: 1%;
|
||||||
|
left: 5%;
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(5px);
|
||||||
|
z-index: 3;
|
||||||
|
background: radial-gradient(circle at 50% 0, rgba(255,255,255, .6) , rgba(255, 255, 255, .0) 58%);
|
||||||
|
}
|
||||||
|
.ball:before,
|
||||||
|
.ball::after{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(5px);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.ball:before {
|
||||||
|
background: radial-gradient(circle at 100% 50%, #5881d3 , rgba(255, 255, 255, .0) 45%);
|
||||||
|
}
|
||||||
|
.ball::after {
|
||||||
|
background: radial-gradient(circle at 0 50%, #ca66e0 , rgba(255, 255, 255, .0) 45%);
|
||||||
|
}
|
||||||
|
@-webkit-keyframes move-map {
|
||||||
|
0% {background-position: -1250rpx 0; }
|
||||||
|
100% {background-position: 0 0;}
|
||||||
|
}
|
||||||
|
@-ms-keyframes move-map {
|
||||||
|
0% {background-position: -1250rpx 0; }
|
||||||
|
100% {background-position: 0 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move-map {
|
||||||
|
0% {background-position: -1250rpx 0; }
|
||||||
|
100% {background-position: 0 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 水晶漂浮动画 */
|
||||||
|
.oct-float {
|
||||||
animation: 4s octfloat infinite;
|
animation: 4s octfloat infinite;
|
||||||
}
|
}
|
||||||
@keyframes octfloat{
|
@keyframes octfloat {
|
||||||
0%{
|
0% {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
50%{
|
|
||||||
|
50% {
|
||||||
margin-top: 15rpx;
|
margin-top: 15rpx;
|
||||||
}
|
}
|
||||||
100%{
|
|
||||||
|
100% {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 背景旋转 */
|
|
||||||
.number-rotate{
|
|
||||||
animation: 30s octrotate infinite linear;
|
|
||||||
}
|
|
||||||
@keyframes octrotate{
|
|
||||||
from{
|
|
||||||
transform:rotate(0deg);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
// 背景
|
|
||||||
.content{
|
.content{
|
||||||
background: $mian-color-deep;
|
min-height: calc(100vh - 60px);
|
||||||
min-height: 100vh;
|
background: #1f1922;
|
||||||
padding-top: var(--status-bar-height);
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
|
||||||
background-image: url(@/static/background/chain-back-00.png);
|
|
||||||
background-size: 100%;
|
|
||||||
background-position: top center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
}
|
||||||
// 求助icon
|
// 数据统计
|
||||||
.help-icon{
|
.total {
|
||||||
vertical-align: middle;
|
position: relative;
|
||||||
margin-bottom: 4px;
|
margin: $margin ($margin + $margin/2);
|
||||||
margin-left: $margin/2;
|
background: #2b2449;
|
||||||
opacity: .7;
|
padding: 0;
|
||||||
}
|
display: flex;
|
||||||
// 原石账户
|
border-radius: $radius;
|
||||||
.info{
|
.item {
|
||||||
margin-top: calc(#{$margin * 2} + 60rpx);
|
width: 50%;
|
||||||
padding: var(--status-bar-height) $padding * 2 $padding * 3;
|
padding: 0 $padding;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.info-number{
|
color: white;
|
||||||
position: relative;
|
font-size: $title-size-sm;
|
||||||
display: inline-block;
|
line-height: 76rpx;
|
||||||
width: 568rpx;
|
image{
|
||||||
height: 568rpx;
|
width: 38rpx;
|
||||||
.number-background{
|
height: 38rpx;
|
||||||
width: 100%;
|
vertical-align: top;
|
||||||
height: 100%;
|
margin-top: calc((76rpx - 38rpx) / 2);
|
||||||
|
margin-right: $margin / 2;
|
||||||
}
|
}
|
||||||
.info-content{
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
content: "";
|
||||||
|
width: 2rpx;
|
||||||
|
left: 50%;
|
||||||
|
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 矿石
|
||||||
|
.ore {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 120%;
|
||||||
|
&>image {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.ore-lists {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
.oct-float-item{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12%;
|
|
||||||
left: 12%;
|
|
||||||
width: 76%;
|
|
||||||
height: 76%;
|
|
||||||
background-image: url(@/static/background/chain-back-02.png);
|
|
||||||
background-size: cover;
|
|
||||||
color: white;
|
|
||||||
.text{
|
|
||||||
font-size: $title-size-m;
|
|
||||||
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
|
||||||
}
|
|
||||||
.number{
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: $title-size + 8;
|
|
||||||
line-height: 70rpx;
|
|
||||||
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
|
||||||
}
|
|
||||||
.login{
|
|
||||||
margin-top: $margin;
|
|
||||||
background-color: $mian-color;
|
|
||||||
display: inline-block;
|
|
||||||
padding: ( $padding / 2 ) $padding;
|
|
||||||
font-size: $title-size-m;
|
|
||||||
border-radius: 30rpx;
|
|
||||||
border:solid 1rpx $mian-color-deep;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 预计增长
|
|
||||||
.increase{
|
|
||||||
margin: 0 ($margin + $margin / 2) ($margin * 2);
|
|
||||||
background: rgba($color: $mian-color, $alpha: .1);
|
|
||||||
text-align: center;
|
|
||||||
height: 80rpx;
|
|
||||||
line-height: 80rpx;
|
|
||||||
font-size: $title-size-m;
|
|
||||||
color: $mian-color;
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
padding: 0 $padding;
|
|
||||||
}
|
|
||||||
// 公告信息
|
|
||||||
.notice{
|
|
||||||
position: fixed;
|
|
||||||
top: $margin * 2;
|
|
||||||
left: $margin + $margin / 2;
|
|
||||||
right: $margin + $margin / 2;
|
|
||||||
padding-top: var(--status-bar-height);
|
|
||||||
z-index: 99;
|
|
||||||
.notice-swiper{
|
|
||||||
height: 60rpx;
|
|
||||||
}
|
|
||||||
.notice-item{
|
|
||||||
position: relative;
|
|
||||||
height: 60rpx;
|
|
||||||
padding-left: 80rpx;
|
|
||||||
padding-right: $padding * 2;
|
|
||||||
display: inline-block;
|
|
||||||
background: rgba($color: $mian-color-deep, $alpha: .3);
|
|
||||||
border-radius: 30rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 100%;
|
|
||||||
.notice-cover{
|
|
||||||
position: absolute;
|
|
||||||
height: 60rpx;
|
|
||||||
width: 60rpx;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background-color: $mian-color-deep;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.notice-title{
|
|
||||||
line-height: 60rpx;
|
|
||||||
color: white;
|
|
||||||
font-size: $title-size-m;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 平台概况
|
|
||||||
.situation{
|
|
||||||
margin: 0 ($margin + $margin / 2);
|
|
||||||
background-image: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .1), $mian-color-deep);
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
padding: $padding;
|
|
||||||
// 平台统计
|
|
||||||
.header{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: $margin*2;
|
|
||||||
.number{
|
|
||||||
color: white;
|
|
||||||
font-size: $title-size + 4;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 90rpx;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
color: $mian-color;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: $title-size-sm;
|
|
||||||
}
|
|
||||||
.header-item{
|
|
||||||
width: 50%;
|
|
||||||
padding: $padding $padding / 2;
|
|
||||||
box-sizing: border-box;
|
|
||||||
&:first-child{
|
|
||||||
width: 100%;
|
|
||||||
.number{
|
|
||||||
font-size: $title-size + 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 节点信息
|
|
||||||
.node-info{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0 -$margin / 2;
|
|
||||||
.node-item{
|
|
||||||
background: rgba($color: $mian-color, $alpha: .2);
|
|
||||||
width: calc(50% - #{$margin});
|
|
||||||
margin: $margin / 2;
|
|
||||||
padding: $padding;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
}
|
|
||||||
.number{
|
|
||||||
font-size: $title-size + 4;
|
|
||||||
font-weight: bold;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-size: $title-size-m;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgba($color: white, $alpha: .7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 图表
|
|
||||||
.chart{
|
|
||||||
background: rgba($color: $mian-color, $alpha: .2);
|
|
||||||
padding: $padding;
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
margin-top: $margin*2;
|
|
||||||
.title{
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 80rpx;
|
.text {
|
||||||
color: rgba($color: $mian-color, $alpha: 1.0);
|
margin-top: $margin / 2;
|
||||||
font-size: $title-size-m;
|
color: white;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 58rpx;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.chart-f2{
|
.ore-item-nav{
|
||||||
height: 200px;
|
@extend .oct-float-item;
|
||||||
|
right: $margin * 3;
|
||||||
|
top: 12%;
|
||||||
|
}
|
||||||
|
.ore-item {
|
||||||
|
@extend .oct-float-item;
|
||||||
|
&:nth-child(1) { top: 16%; left: 13%; }
|
||||||
|
&:nth-child(2) { top: 50%; right: 10%; }
|
||||||
|
&:nth-child(3) { top: 23%; right: 20%; }
|
||||||
|
&:nth-child(4) { top: 70%; left: 33%;}
|
||||||
|
&:nth-child(5) { top: 40%; left: 20%; }
|
||||||
|
&:nth-child(6) { top: 58%; left: 10%;}
|
||||||
|
&:nth-child(7) { top: 10%; right: 43%;}
|
||||||
|
&:nth-child(8) { top: 46%; right: 29%;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 任务
|
||||||
|
.task-block {
|
||||||
|
white-space: nowrap;
|
||||||
|
.item {
|
||||||
|
background: rgba($color: $mian-color, $alpha: .2);
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: $margin;
|
||||||
|
width: 210rpx;
|
||||||
|
padding: $padding * 2 $padding;
|
||||||
|
border-radius: $radius;
|
||||||
|
box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
|
||||||
|
text-align: center;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: $margin + $margin/2;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-right: $margin + $margin/2;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin: $margin 0;
|
||||||
|
width: 98rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
line-height: 98rpx;
|
||||||
|
background: $mian-color-deep;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
image {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $mian-color;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -74,20 +74,6 @@ $padding: 30rpx;
|
|||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ellipsis {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellipsis-2 {
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellipsis-3 {
|
.ellipsis-3 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 482 KiB After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 469 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 8.2 KiB |
BIN
static/icons/gemstone-ore-icon.png
Normal file
BIN
static/icons/gemstone-ore-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Reference in New Issue
Block a user