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.
327 lines
7.4 KiB
327 lines
7.4 KiB
<template>
|
|
|
|
<view class="content flex_col flex_start">
|
|
|
|
<view class="head flex_row flex_around">
|
|
<view class="tap-btn" :class="[getTabClass(e)]" @click="clickHead(i)" v-for="(e,i) in headDate" :key="i">
|
|
{{e.name}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- item -->
|
|
<view class="item flex_col flex_start_y bg-white " v-for="i in 2">
|
|
|
|
<view class="title flex_row flex_start">
|
|
<view class="text-m text-left">消息中心</view>
|
|
<!-- <view class="bandage"></view> -->
|
|
</view>
|
|
|
|
<view class="info flex_row flex_between">
|
|
<view class="time">2020.06.22</view>
|
|
<view class="type">半决赛</view>
|
|
</view>
|
|
|
|
<view class="card flex_row flex_between">
|
|
<view class="persion flex_row">
|
|
<image class="bg-brown" src="../../static/images/event/event_lock.png" mode=""></image>
|
|
<text>adjksk</text>
|
|
</view>
|
|
|
|
<view class="btn-box flex_row">
|
|
<view class="btn state-0 flex_row">已打分</view>
|
|
<view class="btn state-1 flex_row" @click="openGrade()">打分</view>
|
|
<view class="btn state-2 flex_row" @click="openGradeMore()">数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 弹出交互 uview popup有bug,废弃重写-->
|
|
<!-- <u-popup :show="showGrade" @close="close" @open="open" mode="center" :closeOnClickOverlay="true" :closeable="true" :round="10">
|
|
<view class="grade flex_col flex_start" >
|
|
<text class="g-title">赛事打分</text>
|
|
<text class="g-txt">李静分数录入</text>
|
|
<input type="text" value="" placeholder="请录入分数" />
|
|
<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
|
|
<view class="g-btn flex_row">保存</view>
|
|
</view>
|
|
</u-popup> -->
|
|
|
|
<!-- 打分弹出 -->
|
|
<view class="overlay flex_col" v-if="showGrade">
|
|
<view class="grade flex_col flex_start" >
|
|
<image class="g-close" src="../../static/images/event/event_close.png" mode="" @click="closeGrade()"></image>
|
|
<text class="g-title">赛事打分</text>
|
|
<text class="g-txt">李静分数录入</text>
|
|
<input type="text" value="" placeholder="请录入分数" placeholder-class="place-style"/>
|
|
<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
|
|
<view class="g-btn flex_row" @click="closeGrade()">保存</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 赛事数据弹出 -->
|
|
<view class="overlay flex_col" v-if="showGradeMore">
|
|
<view class="grade grade-more flex_col flex_start" >
|
|
<image class="g-close" src="../../static/images/event/event_close.png" mode="" @click="closeGradeMore()"></image>
|
|
<text class="g-title">入围赛数据</text>
|
|
<text class="g-txt">李静分数录入</text>
|
|
<view class="g-input-box">
|
|
<view class="b-item flex_row">
|
|
<text>篮板</text>
|
|
<input type="text" value="" placeholder="请录入数据" placeholder-class="place-style"/>
|
|
</view>
|
|
<view class="b-item flex_row">
|
|
<text>助攻</text>
|
|
<input type="text" value="" placeholder="请录入数据" placeholder-class="place-style"/>
|
|
</view>
|
|
<view class="b-item flex_row">
|
|
<text>场次</text>
|
|
<input type="text" value="" placeholder="请录入数据" placeholder-class="place-style"/>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
|
|
<view class="g-btn flex_row" @click="closeGradeMore()">保存</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <u-modal :show="showGrade" @confirm="open" ref="uModal" :asyncClose="true" @close="close" :closeOnClickOverlay="true">确认????</u-modal> -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showGrade:false,
|
|
showGradeMore:true,
|
|
address:"",
|
|
headIndex:0,
|
|
headDate:[{name:'赛程打分'},{name:'赛事打分'}],
|
|
login:true
|
|
};
|
|
},
|
|
computed:{
|
|
|
|
},
|
|
onLoad(parms) {
|
|
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
methods: {
|
|
openGrade() {
|
|
this.showGrade = ! this.showGrade
|
|
console.log('open');
|
|
},
|
|
closeGrade() {
|
|
this.showGrade = false
|
|
console.log('close');
|
|
},
|
|
openGradeMore() {
|
|
this.showGradeMore = ! this.showGradeMore
|
|
console.log('open');
|
|
},
|
|
closeGradeMore() {
|
|
this.showGradeMore = false
|
|
console.log('close');
|
|
},
|
|
getTabClass(item){
|
|
let {headDate,headIndex} = this
|
|
return headDate[headIndex].name==item.name?'active':''
|
|
},
|
|
clickHead(index){
|
|
this.headIndex = index
|
|
},
|
|
jumpPage(){
|
|
this.$Router.push({name:"login"})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content{
|
|
|
|
.head{
|
|
width: 100%;
|
|
height: 112rpx;
|
|
background-color: white;
|
|
.tap-btn{
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
font-weight: 700;
|
|
width: 200rpx;
|
|
height: 72rpx;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
}
|
|
.active{
|
|
color: white;
|
|
background: #009874;
|
|
border-radius: 36rpx;
|
|
}
|
|
}
|
|
|
|
.item{
|
|
color: #333333;
|
|
position: relative;
|
|
margin-top: 24rpx;
|
|
// border-radius: 10rpx;
|
|
width: 750rpx;
|
|
// height: 124rpx;
|
|
|
|
.title{
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
// margin-bottom: 10rpx;
|
|
font-weight: 700;
|
|
height: 116rpx;
|
|
width: 100%;
|
|
padding-left: 60rpx;
|
|
border-bottom: 1rpx solid #f2f2f7;
|
|
}
|
|
.info{
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
height: 96rpx;
|
|
width: 100%;
|
|
padding: 26rpx 24rpx 26rpx 60rpx;
|
|
border-bottom: 1rpx solid #f2f2f7;
|
|
}
|
|
.card{
|
|
height: 188rpx;
|
|
width: 100%;
|
|
padding: 40rpx 24rpx 40rpx 50rpx;
|
|
border-bottom: 1rpx solid #f2f2f7;
|
|
.persion{
|
|
> image{
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
}
|
|
> text{
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
|
|
.btn-box{
|
|
.btn{
|
|
margin-left: 20rpx;
|
|
width: 132rpx;
|
|
height: 60rpx;
|
|
background: #FF873D;
|
|
border-radius: 6rpx;
|
|
color: white;
|
|
}
|
|
.state-0{
|
|
background-color: #36C990;
|
|
}
|
|
.state-1{
|
|
background-color: #009874;
|
|
}
|
|
.state-2{
|
|
background-color: #FF873D;
|
|
}
|
|
}
|
|
}
|
|
.bandage{
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
// position: absolute;
|
|
// right: 60rpx;
|
|
background: #EA5061;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 34rpx;
|
|
margin-top: -16rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.overlay{
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100%;
|
|
background: rgba(0,0,0,0.6);
|
|
z-index: 90;
|
|
.grade{
|
|
z-index: 999;
|
|
width: 620rpx;
|
|
// height: 600rpx;
|
|
background: #FFFFFF;
|
|
padding: 50rpx;
|
|
border-radius: 10rpx;
|
|
.g-close{
|
|
align-self: flex-end;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
.g-title{
|
|
margin-top: 20rpx;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
font-weight: 700;
|
|
}
|
|
.g-txt{
|
|
margin: 58rpx auto 12rpx auto;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
input{
|
|
width: 456rpx;
|
|
height: 88rpx;
|
|
background: #FFFFFF;
|
|
border: 2rpx solid #D8D8D8;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx;
|
|
}
|
|
.g-tip{
|
|
align-self: flex-start;
|
|
font-size: 24rpx;
|
|
color: #9A9A9D;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 52rpx;
|
|
margin-left: 32rpx;
|
|
}
|
|
.g-btn{
|
|
width: 240rpx;
|
|
height: 88rpx;
|
|
background: #009874;
|
|
border-radius: 10rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 700;
|
|
margin-bottom: 34rpx;
|
|
}
|
|
}
|
|
.grade-more{
|
|
padding-left:72rpx;
|
|
padding-right: 80rpx;
|
|
.g-input-box{
|
|
.b-item{
|
|
margin-top: 20rpx;
|
|
> text{
|
|
font-size: 28rpx;
|
|
color: #9C9C9F;
|
|
padding-right: 20rpx;
|
|
}
|
|
input {
|
|
width: 384rpx;
|
|
}
|
|
}
|
|
}
|
|
.g-tip{
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
.place-style{
|
|
font-size: 28rpx;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
|
|
</style>
|