This commit is contained in:
lnn19986213
parent
7b36ef018d
commit
032ea1cb78
|
|
@ -1,10 +1,16 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="art_race_itm" v-for="(v,i) in 6" @click="goRaceDetail(i)">
|
||||
<view class="topTabs">
|
||||
<u-tabs :list="list1" @click="click" lineColor="#99241B"></u-tabs>
|
||||
</view>
|
||||
<view class="art_race_itm" v-for="(v,i) in dataList" :key="i" @click="goRaceDetail(v.id)">
|
||||
<image style="width: 100%; height: 296rpx;" src="../../static/orderE.png" mode=""></image>
|
||||
<view class="art_race_bot">
|
||||
<text class="art_title">艺起战疫</text>
|
||||
<text class="art_race_con u-line-2">寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔 墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的...</text>
|
||||
<text class="art_title">{{v.title}}</text>
|
||||
<view class="art_race_con u-line-2">{{v.content}}</view>
|
||||
<view class="art_race_con">
|
||||
截止时间：{{v.time}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -14,45 +20,106 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
list1: [{
|
||||
name: '关注',
|
||||
},
|
||||
{
|
||||
name: '推荐',
|
||||
},
|
||||
{
|
||||
name: '电影'
|
||||
},
|
||||
{
|
||||
name: '科技'
|
||||
},
|
||||
{
|
||||
name: '音乐'
|
||||
},
|
||||
{
|
||||
name: '美食'
|
||||
},
|
||||
{
|
||||
name: '文化'
|
||||
},
|
||||
{
|
||||
name: '财经'
|
||||
},
|
||||
{
|
||||
name: '手工'
|
||||
}
|
||||
],
|
||||
dataList: [{
|
||||
id: '111',
|
||||
title: '艺起战疫',
|
||||
content: '寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的',
|
||||
time: '2023-09-30 20:00'
|
||||
},
|
||||
{
|
||||
id: '111',
|
||||
title: '艺起战疫',
|
||||
content: '寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的',
|
||||
time: '2023-09-30 20:00'
|
||||
},
|
||||
{
|
||||
id: '111',
|
||||
title: '艺起战疫',
|
||||
content: '寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的',
|
||||
time: '2023-09-30 20:00'
|
||||
},
|
||||
{
|
||||
id: '111',
|
||||
title: '艺起战疫',
|
||||
content: '寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的',
|
||||
time: '2023-09-30 20:00'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
goRaceDetail(id){
|
||||
methods: {
|
||||
goRaceDetail(id) {
|
||||
console.log(id);
|
||||
uni.navigateTo({
|
||||
url:"/pagesB/ArtRace/ArtRaceDetail?id="+String(id),
|
||||
url: "/pagesB/ArtRace/ArtRaceDetail?id=" + String(id),
|
||||
})
|
||||
},
|
||||
click(item) {
|
||||
console.log('item', item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
.art_race_itm{
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 64rpx);
|
||||
margin: 24rpx auto;
|
||||
|
||||
.art_race_bot{
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// page {
|
||||
// background-color: #F4F5F7;
|
||||
// }
|
||||
.topTabs {
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
.art_title{
|
||||
font-weight: 600;
|
||||
}
|
||||
.art_race_con{
|
||||
font-size: 20rpx;
|
||||
color: $gray;
|
||||
margin-bottom: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.art_race_itm {
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
width: 686rpx;
|
||||
margin: 24rpx auto;
|
||||
|
||||
.art_race_bot {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.art_title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.art_race_con {
|
||||
font-size: 20rpx;
|
||||
color: $gray;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,53 +1,113 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/blackArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<view class="">
|
||||
<u-loading-page :loading="load"></u-loading-page>
|
||||
</view>
|
||||
<view class="art_race_itm" v-if="!load">
|
||||
<view class="return" @click="back">
|
||||
<image src="../../static/orderLeftArrow.png" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="pageImg">
|
||||
<u-swiper v-if="list.length > 0" :list="list" :autoplay="true" @change="e => currentNum = e.current"
|
||||
indicatorStyle="right: 20px" height='440rpx'>
|
||||
<view slot="indicator" class="indicator-num">
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
|
||||
</view>
|
||||
</u-swiper>
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="mainTitle">{{data.title}}</view>
|
||||
<view class="textList">
|
||||
<view class="type">
|
||||
<img class='textImg' src="../../static/detailIcon/icon10.png" alt="">
|
||||
<view class="text1">比赛简介</view>
|
||||
</view>
|
||||
<view class="text2">{{data.demand}}</view>
|
||||
</view>
|
||||
<view class="textList">
|
||||
<view class="type">
|
||||
<img class='textImg' src="../../static/detailIcon/icon10.png" alt="">
|
||||
<view class="text1">比赛内容</view>
|
||||
</view>
|
||||
<view class="text2">
|
||||
{{data.content}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="activityDetails">
|
||||
<view class="item_ul">
|
||||
<view class="title">
|
||||
<image class="icon" src="../../static/detailIcon/icon0.png" mode="scaleToFill"></image>
|
||||
<text>需求详情</text>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/detailIcon/icon5.png" mode="scaleToFill"></image>
|
||||
<text>类型:</text>
|
||||
</view>
|
||||
<view class="content">{{data.typeName}}</view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/detailIcon/icon6.png" mode="scaleToFill"></image>
|
||||
<text> 可接单人数:</text>
|
||||
</view>
|
||||
<view class="content"><text style=" color: #99241B;"> {{data.jdrs}}</text>/{{data.quantity}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/detailIcon/icon7.png" mode="scaleToFill"></image>
|
||||
<text>截止时间:</text>
|
||||
</view>
|
||||
<view class="content"> {{data.deadline}}</view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/detailIcon/icon4.png" mode="scaleToFill"></image>
|
||||
<text>活动时间:</text>
|
||||
</view>
|
||||
<view class="content"> {{data.activityTime}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 红色按钮 -->
|
||||
<view>
|
||||
<view class="" v-if="data.hallState == 1">
|
||||
<view class="orderBtn" v-if="data.isBaoming">
|
||||
<view class="btnQ" @click="throwWork">取消报名</view>
|
||||
</view>
|
||||
<view class="orderBtn" v-else>
|
||||
<view class="btn" @click="throwWork">报名</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<view class="orderBtn">
|
||||
<view class="btnQ">报名已截止</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 红色按钮ed -->
|
||||
<view class="activityDetails">
|
||||
<view class="item_ul">
|
||||
<view class="title">
|
||||
<image class="icon" src="../../static/detailIcon/icon0.png" mode="scaleToFill"></image>
|
||||
<text>参赛作品展示</text>
|
||||
</view>
|
||||
<view class="worksPart">
|
||||
<view class="workItems" v-for="(v,i) in workList" :key="i">
|
||||
<view class="workImg">
|
||||
<image :src="v.img" style="width: 100%; height: 100%;"></image>
|
||||
</view>
|
||||
<view class="workText">
|
||||
{{v.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--导航栏ed -->
|
||||
|
||||
<view class="art_race_itm">
|
||||
<image style="width: 100%; height: 440rpx;" src="../../static/orderE.png" mode=""></image>
|
||||
<view class="art_race_bot">
|
||||
<text class="art_title">艺起战疫</text>
|
||||
<text class="art_race_con ">寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔 墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="race_itm_con">
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">比赛类型:</text>
|
||||
<text class="race_type_con">书画</text>
|
||||
</view>
|
||||
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">比赛形式:</text>
|
||||
<text class="race_type_con">线上投稿</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">投稿开始时间:</text>
|
||||
<text class="race_type_con">2021-02-02</text>
|
||||
</view>
|
||||
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">投稿结束时间:</text>
|
||||
<text class="race_type_con">2021-02-02</text>
|
||||
</view>
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">审评结束时间:</text>
|
||||
<text class="race_type_con">2021-02-02</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 红色按钮 -->
|
||||
<view class="operation">
|
||||
<button type="default" class="next" @click="throwWork">立即投稿</button>
|
||||
</view>
|
||||
<!-- 红色按钮ed -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -55,8 +115,47 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
currentNum: 0,
|
||||
list: [
|
||||
'../../static/blackArrow.png'
|
||||
],
|
||||
data: {
|
||||
title: '标题',
|
||||
demand: '简介',
|
||||
content: 'FDA施工队发生噶v通过热巴v我提个阿萨出发',
|
||||
deadline: '2023-02-02',
|
||||
activityTime: '2023-02-02',
|
||||
jdrs: '10',
|
||||
quantity: '10',
|
||||
typeName: '类型',
|
||||
hallState: '1',
|
||||
isBaoming: false
|
||||
},
|
||||
workList: [
|
||||
{
|
||||
name: '111',
|
||||
img: '../../static/detailIcon/icon0.png'
|
||||
},
|
||||
{
|
||||
name: '222',
|
||||
img: '../../static/detailIcon/icon0.png'
|
||||
},
|
||||
{
|
||||
name: '333',
|
||||
img: '../../static/detailIcon/icon0.png'
|
||||
},
|
||||
{
|
||||
name: '444',
|
||||
img: '../../static/detailIcon/icon0.png'
|
||||
},
|
||||
{
|
||||
name: '555',
|
||||
img: '../../static/detailIcon/icon0.png'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -86,113 +185,216 @@
|
|||
},
|
||||
onLoad(opt) {
|
||||
console.log(opt.id);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.art_race_itm {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.return {
|
||||
position: fixed;
|
||||
left: 24rpx;
|
||||
top: 110rpx;
|
||||
z-index: 10;
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pageImg {
|
||||
height: 440rpx;
|
||||
}
|
||||
|
||||
.art_race_bot {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #FFFFFF;
|
||||
.main {
|
||||
padding: 32rpx;
|
||||
|
||||
.art_title {
|
||||
.mainTitle {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #251B1D;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.art_race_con {
|
||||
font-size: 20rpx;
|
||||
color: $gray;
|
||||
.textList {
|
||||
margin-bottom: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
|
||||
}
|
||||
.textImg {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.race_itm_con {
|
||||
height: 1000rpx;
|
||||
margin-top: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
.text1 {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #32333C;
|
||||
}
|
||||
}
|
||||
|
||||
.race_type_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
|
||||
.race_type_titl {
|
||||
color: $gray;
|
||||
.text2 {
|
||||
font-size: 28rpx;
|
||||
color: #32333C;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.race_type_con {}
|
||||
}
|
||||
}
|
||||
.file_box {
|
||||
width: 92%;
|
||||
height: 64px;
|
||||
margin: 10px 4%;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #251B1D;
|
||||
background: #F4F5F7;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
.file_box_left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: 12px;
|
||||
margin-left: 12px;
|
||||
float: left;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
.file_box_left_img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.backImg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.file_box_right {
|
||||
margin-left: 20px;
|
||||
float: left;
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
.next {
|
||||
width: calc(100% - 48rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
background-color: #99241B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
border: none;
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
.file_box_name {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #251B1D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 16rpx;
|
||||
background: #F4F5F7;
|
||||
}
|
||||
|
||||
.activityDetails {
|
||||
.item_ul {
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
background: #F4F5F7;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
// display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item_li {
|
||||
padding: 16rpx 32rpx 32rpx;
|
||||
margin: 16rpx 0;
|
||||
border-bottom: 2rpx solid #F1F1F1;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
|
||||
.standard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
// display: none;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #251B1D;
|
||||
// color: $gray;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {}
|
||||
}
|
||||
|
||||
.worksPart{
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.workItems{
|
||||
width: 320rpx;
|
||||
height: 240rpx;
|
||||
margin-bottom: 24rpx;
|
||||
.workImg{
|
||||
width: 320rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.workText{
|
||||
width: 320rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.orderBtn {
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
|
||||
.btn {
|
||||
width: calc(100% - 64rpx);
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background: #99241B;
|
||||
border-radius: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.btnQ {
|
||||
width: calc(100% - 64rpx);
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background: #F9F2F2;
|
||||
border-radius: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #99241B;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
|
@ -86,8 +86,6 @@
|
|||
</view>
|
||||
<view class="content"> {{data.activityTime}} </view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue