268 lines
6.2 KiB
Vue
268 lines
6.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 账户余额 -->
|
|
<view class="total">
|
|
<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>能量球 99</view>
|
|
<view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>能量碎片 11</view>
|
|
</view>
|
|
<!-- 矿机 -->
|
|
<view class="ore">
|
|
<image class="ore-back" src="@/static/background/chain-back-00.png" mode="widthFix"></image>
|
|
<view class="ball">
|
|
<view class="shadow"></view>
|
|
</view>
|
|
<view class="ore-lists">
|
|
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
|
|
<block v-if="item.amount !== null">
|
|
<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
|
|
<view class="text">能量碎片{{ item.amount || '-'}}</view>
|
|
</block>
|
|
</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>
|
|
<!-- 任务分类 -->
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
crystalArr : [],
|
|
categoryArr : [],
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 星球旋转 */
|
|
.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;
|
|
}
|
|
@keyframes octfloat {
|
|
0% {
|
|
margin-top: 0;
|
|
}
|
|
|
|
50% {
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
100% {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
min-height: calc(100vh - 60px);
|
|
background: #1f1922;
|
|
overflow: hidden;
|
|
}
|
|
// 数据统计
|
|
.total {
|
|
position: relative;
|
|
margin: $margin ($margin + $margin/2);
|
|
background: #2b2449;
|
|
padding: 0;
|
|
display: flex;
|
|
border-radius: $radius;
|
|
.item {
|
|
width: 50%;
|
|
padding: 0 $padding;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: $title-size-sm;
|
|
line-height: 76rpx;
|
|
image{
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
vertical-align: top;
|
|
margin-top: calc((76rpx - 38rpx) / 2);
|
|
margin-right: $margin / 2;
|
|
}
|
|
}
|
|
|
|
&::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;
|
|
text-align: center;
|
|
.text {
|
|
margin-top: $margin / 2;
|
|
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;
|
|
}
|
|
}
|
|
.ore-item-nav{
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|