红绿项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

314 lines
5.6 KiB

<template>
<view class="">
<view class="cont2_body">
<view class="body_con_zon" v-for="(item,index) in myGameRecord" :key="item.id" @click="open(index)"
:class="index==cont3inde?'on':''">
<view class="bodycon flex" >
<view class="ga_cont3 flex">
<view class="body_item">
{{item.period}}
</view>
<view class="body_item mar_let" :class="item.status=='success'?'green':'red'">
{{item.status}}
</view>
<view class="body_item mar_let" :class="item.status=='success'?'green':'red'">
{{item.bettingAmount}}
</view>
</view>
<view class="body_item jiantou">
<image src="../../static/color/loading_icon_ins@3x(18).png" mode=""></image>
</view>
</view>
<view class="list">
<view class="list_con">
<view class="periodd">
period detall
</view>
<view class="perd_item flex">
<view class="name">
period
</view>
<view class="num">
{{item.period}}
</view>
</view>
<view class="perd_item flex">
<view class="name">
contract money
</view>
<view class="num">
{{item.bettingPrice}}
</view>
</view>
<view class="perd_item flex">
<view class="name">
contract count
</view>
<view class="num">
{{item.bettingNumber}}
</view>
</view>
<view class="perd_item flex">
<view class="name">
delivery
</view>
<view class="num">
{{item.bettingNumber}}
</view>
</view>
<view class="perd_item flex">
<view class="name">
fee
</view>
<view class="num">
{{item.bettingFee}}
</view>
</view>
<view class="perd_item flex">
<view class="name">
select
</view>
<view class="num">
<image :src="'static/color/ico_apple_'+item.lotteryColor+'@3x.png'" mode=""></image>
</view>
</view>
<view class="perd_item flex">
<view class="name">
status
</view>
<view class="num">
{{item.status}}
</view>
</view>
<view class="perd_item flex">
<view class="name">
Amount
</view>
<view class="num">
{{item.bettingAmount}}
</view>
</view>
<view class="perd_item flex">
<view class="name">
create
</view>
<view class="num">
{{item.addTime}}
</view>
</view>
</view>
</view>
</view>
</view>
<!-- <cont class="test"></cont> -->
<view class="morejia">
<p class="">More</p>
<image src="../../static/color/loading_icon_ins@3x(20).png" mode=""></image>
</view>
</view>
</template>
<script>
import cont from "../cont/cont.vue"
const COMPONENT_NAME = 'gamecont3'
export default {
name: COMPONENT_NAME,
props:["myGameRecord"],
data() {
return {
// cont3data:[
// {
// id:1,
// num:'20210701303',
// code:'Fail',
// profit:'-19.00',
// },
// {
// id:2,
// num:'20210701303',
// code:'Fail',
// profit:'-19.00',
// },
// {
// id:3,
// num:'20210701303',
// code:'Fail',
// profit:'-19.00',
// },
// {
// id:4,
// num:'20210701303',
// code:'success',
// profit:'427.50',
// },
// {
// id:5,
// num:'20210701303',
// code:'success',
// profit:'427.50',
// },
// {
// id:6,
// num:'20210701303',
// code:'Fail',
// profit:'-19.00',
// },
// {
// id:7,
// num:'20210701303',
// code:'Fail',
// profit:'-19.00',
// },
// {
// id:8,
// num:'20210701303',
// code:'Fail',
// profit:'-19.00',
// },
// {
// id:9,
// num:'20210701303',
// code:'success',
// profit:'427.50',
// },
// {
// id:10,
// num:'20210701303',
// code:'success',
// profit:'427.50',
// },
// ],
cont3inde:-1,
pd:0,
}
},
computed: {
},
mounted() {
},
methods: {
open(i){
this.cont3inde=i;
this.pd++;
if(this.pd%2==0){
this.cont3inde=-1;
}
}
},
}
</script>
<style>
.num image{
width: 32rpx;
height: 32rpx;
}
.perd_item{
margin-bottom: 24rpx;
}
.perd_item .name{
text-transform: capitalize;
color: #303133;
font-size: 28rpx;
}
.perd_item .num{
color: #303133;
font-size: 28rpx;
}
.periodd{
font-size: 28rpx;
text-transform: capitalize;
color: #954DE3;
margin-bottom: 24rpx;
}
.list_con{
padding: 0 60rpx;
}
.list{
max-height: 0rpx;
overflow: hidden;
transition: .5s all;
padding: 0;
background-color: #F5F7FA;
}
.body_con_zon.on .list{
padding: 48rpx 0;
max-height: 700rpx;
}
.red{
color: #F25B5B !important;
}
.green{
color: #00B977 !important;
}
.bodycon{
height: 72rpx;
padding: 0 36rpx;
}
.mar_let{
margin-left: 30rpx;
}
.flex2{
display: flex;
justify-content: center;
}
.test{
position: fixed;
right: 0;
top: 75%;
}
.morejia{
display: table;
width: auto;
margin: 0 auto;
padding-top: 48rpx;
padding-bottom: 62rpx;
}
.morejia p{
font-size: 28rpx;
color: #954DE3;
text-align: center;
}
.morejia image{
display: block;
width: 24rpx;
height: 24rpx;
margin: 0 auto;
}
.head_item{
font-weight: bold;
color: #303133;
}
.body_item{
color: #303133;
text-transform: capitalize;
}
.body_item image{
width: 32rpx;
height: 32rpx;
}
.body_item image:last-child{
padding-left: 8rpx;
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.gamecont2{
padding: 0 36rpx;
}
.body_con_zon.on .jiantou image{
transform: rotate(-180deg);
padding: 0 !important;
}
</style>