451 lines
8.6 KiB
Vue
451 lines
8.6 KiB
Vue
|
<!-- 签到任务 -->
|
|||
|
|
<template>
|
|||
|
|
<navbar_neadVue title="签到任务" background_color="#CAF6F5"></navbar_neadVue>
|
|||
|
|
<view class="content-top">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="top-right-text">
|
|||
|
|
<text @click="GoTo()">签到明细</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
<view class="top-left-text">
|
|||
|
|
<text>{{count}}</text>
|
|||
|
|
<text>校园币</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="top-left">
|
|||
|
|
<text>我的校园币</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="right-image">
|
|||
|
|
<image src="../../static/images/sign/金币.png"></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="content-bottom">
|
|||
|
|
<view class="c-bottom">
|
|||
|
|
<text>
|
|||
|
|
已连续签到<text class="text-1">1</text>天
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="content-bottom-bot">
|
|||
|
|
<view class="bot-text">
|
|||
|
|
<text>记得去商城兑换礼物奥！</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
|
|||
|
|
<ul style="display: flex; margin-left: 24rpx;padding-left: 2rpx;margin-top: 48rpx;">
|
|||
|
|
<li>
|
|||
|
|
<image style="width: 42rpx; height: 44rpx;" src="../../static/images/sign/1.png">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<text style="display: block; font-weight: Regular;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 22rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #7E7E7E;">12日</text>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li style="margin-left: 58rpx;">
|
|||
|
|
<image style="width: 42rpx; height: 44rpx;" src="../../static/images/sign/1.png">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<text style="display: block; font-weight: Regular;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 22rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
padding-right: 4rpx;
|
|||
|
|
color: #7E7E7E;">12日</text>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li style="margin-left: 58rpx;">
|
|||
|
|
<image style="width: 42rpx; height: 44rpx;" src="../../static/images/sign/1.png">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<text style="display: block; font-weight: Regular;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 22rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
padding-right: 4rpx;
|
|||
|
|
color: #7E7E7E;">12日</text>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li style="margin-left: 58rpx;">
|
|||
|
|
<image style="width: 42rpx; height: 44rpx;" src="../../static/images/sign/1.png">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<text style="display: block; font-weight: Regular;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 22rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
padding-right: 4rpx;
|
|||
|
|
color: #7E7E7E;">12日</text>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li style="margin-left: 58rpx;">
|
|||
|
|
<image style="width: 42rpx; height: 44rpx;" src="../../static/images/sign/1.png">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<text style="display: block; font-weight: Regular;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 22rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
padding-right: 4rpx;
|
|||
|
|
color: #7E7E7E;">12日</text>
|
|||
|
|
</li>
|
|||
|
|
<li style="margin-left: 58rpx;">
|
|||
|
|
<image style="width: 42rpx; height: 44rpx;" src="../../static/images/sign/1.png">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<text style="display: block; font-weight: Regular;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 22rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
padding-right: 4rpx;
|
|||
|
|
color: #7E7E7E;">12日</text>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 签到任务 -->
|
|||
|
|
<view class="task">
|
|||
|
|
<view style="height: 60rpx;">
|
|||
|
|
<text class="tasktext">签到任务</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="task-content" v-for="(item,index) in arr" :key="index">
|
|||
|
|
<view class="task-right">
|
|||
|
|
<text>{{item.type}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<text class="c-text">{{item.title}}</text>
|
|||
|
|
<image style="width: 21rpx;height: 21rpx;margin-left: 36rpx;" src="../../static/images/sign/1.png">
|
|||
|
|
</image>
|
|||
|
|
<text class="count-text">{{item.count}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="task-left">
|
|||
|
|
<text class="left-text">{{item.content.title}} <text class="left-0text">
|
|||
|
|
{{item.content.count}}
|
|||
|
|
</text>{{item.content.cuent}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view style="height: 24rpx;"></view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import navbar_neadVue from "../common/navbar/navbar_nead.vue";
|
|||
|
|
import exchangemall from "./exchangemall.vue"
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
function GoTo() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
reactive
|
|||
|
|
} from "vue";
|
|||
|
|
const count = ref("750");
|
|||
|
|
const arr = reactive([{
|
|||
|
|
id: 1,
|
|||
|
|
type: "立即签到",
|
|||
|
|
title: "每日签到",
|
|||
|
|
count: "+1",
|
|||
|
|
content: {
|
|||
|
|
title: "点击签到获得每日奖励 ",
|
|||
|
|
count: "(" + "0",
|
|||
|
|
cuent: "/" + "1" + ")"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
type: "去关注",
|
|||
|
|
title: "关注",
|
|||
|
|
count: "+2",
|
|||
|
|
content: {
|
|||
|
|
title: "关注优秀用户得奖励 ",
|
|||
|
|
count: "(" + "0",
|
|||
|
|
cuent: "/" + "1" + ")"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
type: "去点赞",
|
|||
|
|
title: "点赞",
|
|||
|
|
count: "+2",
|
|||
|
|
content: {
|
|||
|
|
title: "点赞话题获取奖励 ",
|
|||
|
|
count: "(" + "0",
|
|||
|
|
cuent: "/" + "3" + ")"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
type: "去发布",
|
|||
|
|
title: "发布话题",
|
|||
|
|
count: "+3",
|
|||
|
|
content: {
|
|||
|
|
title: "点赞话题获取奖励 ",
|
|||
|
|
count: "(" + "0",
|
|||
|
|
cuent: "/" + "1" + ")"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
type: "立即邀请",
|
|||
|
|
title: "邀请新用户",
|
|||
|
|
count: "+5",
|
|||
|
|
content: {
|
|||
|
|
title: "邀请新用户得奖励 ",
|
|||
|
|
count: "",
|
|||
|
|
cuent: ""
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
@import '../../pages/common/navbar/navbar.css';
|
|||
|
|
|
|||
|
|
.content-top {
|
|||
|
|
/* height: 424rpx; */
|
|||
|
|
height: 502rpx;
|
|||
|
|
background: linear-gradient(-180deg, #c9f6f5, #ffffff);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
margin-right: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-right-text>text {
|
|||
|
|
font-weight: Regular;
|
|||
|
|
/* width: 95rpx; */
|
|||
|
|
height: 24rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #000000;
|
|||
|
|
float: right;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left-text {
|
|||
|
|
padding-top: 99rpx;
|
|||
|
|
padding-left: 1rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left-text>text:first-child {
|
|||
|
|
color: #000000;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
font-face: Microsoft YaHei;
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: 46.29rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left-text>text:last-child {
|
|||
|
|
color: #000000;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
font-face: Microsoft YaHei;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: 46.29rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left>text {
|
|||
|
|
display: block;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
/* width: 119rpx; */
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #6F6F6F;
|
|||
|
|
padding-left: 1rpx;
|
|||
|
|
line-height: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-image>image {
|
|||
|
|
width: 248rpx;
|
|||
|
|
height: 289rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 279rpx;
|
|||
|
|
right: 32rpx;
|
|||
|
|
z-index: 7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-bottom {
|
|||
|
|
width: 319rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin-top: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-bottom {
|
|||
|
|
padding-left: 26rpx;
|
|||
|
|
padding-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-bottom>text:first-child {
|
|||
|
|
color: #000000;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
font-face: Microsoft YaHei;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: 46.29rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1 {
|
|||
|
|
color: #fa3939;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
font-face: Microsoft YaHei;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: 46.29rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-bottom-bot {
|
|||
|
|
position: relative;
|
|||
|
|
/* width: 686rpx; */
|
|||
|
|
height: 214rpx;
|
|||
|
|
border-radius: 0 32rpx 32rpx 32rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bot-text {
|
|||
|
|
padding-left: 24rpx;
|
|||
|
|
display: block;
|
|||
|
|
/* padding-top: 12rpx; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bot-text>text {
|
|||
|
|
font-weight: Regular;
|
|||
|
|
width: 248rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #6F6F6F;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task {
|
|||
|
|
width: 686rpx;
|
|||
|
|
/* height: 484rpx; */
|
|||
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
/* background: #fa3939; */
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
margin-right: 32rpx;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tasktext {
|
|||
|
|
display: block;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
width: 144rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #000000;
|
|||
|
|
padding-top: 24rpx;
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-content {
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-right {
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|||
|
|
background: #f99b46;
|
|||
|
|
float: right;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-text {
|
|||
|
|
font-weight: Regular;
|
|||
|
|
width: 95rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.count-text {
|
|||
|
|
font-weight: Regular;
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 16rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #F99B46;
|
|||
|
|
padding-left: 3rpx;
|
|||
|
|
line-height: 16rpx;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-right>text {
|
|||
|
|
font-weight: Regular;
|
|||
|
|
width: 95rpx;
|
|||
|
|
height: 25rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
display: block;
|
|||
|
|
margin: auto;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-left {
|
|||
|
|
/* display: block; */
|
|||
|
|
height: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-text {
|
|||
|
|
display: block;
|
|||
|
|
color: #999999;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
font-face: Microsoft YaHei;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
/* margin-top: 12rpx; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-0text {
|
|||
|
|
color: #fb5c5c;
|
|||
|
|
font-weight: Regular;
|
|||
|
|
font-face: Microsoft YaHei;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
</style>
|