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.
196 lines
3.8 KiB
196 lines
3.8 KiB
<template>
|
|
<view class="content flex_col flex_start">
|
|
|
|
<!-- <view class="load-none flex_col">
|
|
<image src="../../static/images/event/enent_none.png" mode="aspectFill"></image>
|
|
<text>还没有任何赛事~</text>
|
|
</view> -->
|
|
|
|
<!-- item -->
|
|
<view class="item flex_col flex_start_y bg-white padding " v-for="i in 3" @click="jumpPage('eventGrade')">
|
|
|
|
<view class="time flex_row">
|
|
<image src="../../static/images/event/event_lock.png" mode=""></image>
|
|
<text>2020.06.22</text>
|
|
<text>前报名</text>
|
|
</view>
|
|
<view class="box flex_row flex_start_y">
|
|
|
|
<image class="img" src="../../static/images/index/index_cup.png" mode=""></image>
|
|
|
|
<view class="info flex_col flex_start flex_start_y">
|
|
<view class="event_title flex_row flex_start flex_start_y">
|
|
<text class="tag tag_green" >团队</text>
|
|
<text class="tag tag_blue" >个人</text>
|
|
<text class="">{{title|autoAddPoints}}</text>
|
|
</view>
|
|
<view class="location flex_row">
|
|
<image src="../../static/images/event/event_location.png" mode=""></image>
|
|
<text class="text-maxline-one">{{address}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="load-finish">我是有底线的～</view>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
title:"默认块级元素默认块级元素默认块级元素",
|
|
address:"广州省广州市区白云区广州省广州市区白云区永泰广州省广州市区白云区广州省广州市区白云区永泰",
|
|
login:true
|
|
};
|
|
},
|
|
onLoad(parms) {
|
|
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
methods: {
|
|
jumpPage(name){
|
|
this.$Router.push({name})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
page{
|
|
background: #F2F2F7;
|
|
// height: 100vh;
|
|
}
|
|
.content{
|
|
|
|
.item{
|
|
color: #333333;
|
|
position: relative;
|
|
margin-top: 24rpx;
|
|
border-radius: 10rpx;
|
|
width: 702rpx;
|
|
height: 368rpx;
|
|
.box{
|
|
font-size: 32rpx;
|
|
color: #1A1A1A;
|
|
margin-bottom: 10rpx;
|
|
font-weight: 700;
|
|
.img{
|
|
width: 300rpx;
|
|
height: 224rpx;
|
|
background-color: lightgray;
|
|
}
|
|
.info{
|
|
width: 350rpx;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
margin-left: 10rpx;
|
|
.location{
|
|
// width: 330rpx;
|
|
margin-left: 10rpx;
|
|
margin-top: 14rpx;
|
|
font-size: 24rpx;
|
|
color: #9A9A9D;
|
|
// display: inline;
|
|
text-align: left;
|
|
>image{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
>text{
|
|
margin-left: 5rpx;
|
|
width: 320rpx;
|
|
}
|
|
}
|
|
.event_title{
|
|
text-align: left;
|
|
display: inline;
|
|
> text{
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.tag{
|
|
// margin-right: 10rpx;
|
|
font-size: 24rpx;
|
|
width: 64rpx;
|
|
height: 36rpx;
|
|
border-radius: 6rpx;
|
|
text-align: center;
|
|
line-height: 36rpx;
|
|
padding: 5rpx 5rpx;
|
|
// margin: 10rpx 0;
|
|
|
|
}
|
|
.tag_blue{
|
|
color: #32C5FF;
|
|
background: #E0F6FF;
|
|
}
|
|
.tag_green{
|
|
color: #36C990;
|
|
background: #DBF5EB;
|
|
}
|
|
}
|
|
}
|
|
.time{
|
|
font-size: 28rpx;
|
|
color: #9A9A9D;
|
|
margin-bottom: 32rpx;
|
|
>image{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
>text{
|
|
margin: 0 30rpx 0 10rpx;
|
|
}
|
|
|
|
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.load-finish{
|
|
padding: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
|
|
.text-maxline-two {
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
}
|
|
.load-none{
|
|
> image{
|
|
margin-top: 33vh;
|
|
width: 368rpx;
|
|
height: 316rpx;
|
|
}
|
|
> text{
|
|
padding: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
</style>
|