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.
466 lines
12 KiB
466 lines
12 KiB
<script lang="ts" setup> |
|
import { ref } from 'vue' |
|
import History from '@/assets/images/task/history.png' |
|
import unclaimed from '@/assets/images/task/dlq.png' |
|
import dot from '@/assets/images/task/dot.png' |
|
import money from '@/assets/images/task/money.png' |
|
|
|
// 签到天数 |
|
const sign = ref([ |
|
{ |
|
day: '第1天', |
|
img: unclaimed, |
|
status: 1, |
|
}, |
|
{ |
|
day: '第2天', |
|
img: unclaimed, |
|
status: 1, |
|
}, |
|
{ |
|
day: '第3天', |
|
img: unclaimed, |
|
status: 1, |
|
}, |
|
{ |
|
day: '第4天', |
|
img: unclaimed, |
|
status: 2, |
|
}, |
|
{ |
|
day: '第5天', |
|
img: unclaimed, |
|
status: 3, |
|
}, |
|
{ |
|
day: '第6天', |
|
img: unclaimed, |
|
status: 3, |
|
}, |
|
{ |
|
day: '第7天', |
|
img: unclaimed, |
|
status: 3, |
|
}, |
|
]) |
|
// 做任务赚积分 |
|
const earn = ref([ |
|
{ |
|
title: '登录微信小程序', |
|
dot: 1, |
|
status: 1, |
|
}, |
|
{ |
|
title: '邀请注册', |
|
dot: 200, |
|
status: 0, |
|
}, |
|
{ |
|
title: '每日登录', |
|
dot: 2, |
|
status: 1, |
|
}, |
|
]) |
|
</script> |
|
|
|
<template> |
|
<div class="basic-task-box"> |
|
<div class="title"> |
|
基础任务 |
|
</div> |
|
<div class="contant flex flex-row"> |
|
<div class="left basis-3/5"> |
|
<div class="top flex flex-row"> |
|
<div class="login-day"> |
|
您已连续登录 <span>3</span> 天 |
|
</div> |
|
<div class="historyBox"> |
|
<img class="historyImg" :src="History" alt=""> |
|
<div class="historyName"> |
|
历史 |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bottom"> |
|
<div class="accumulate"> |
|
<div class="three"> |
|
累计领取：3点数 |
|
</div> |
|
<div class="ten"> |
|
连续签到7天可得 10 点数 |
|
</div> |
|
</div> |
|
<div class="sign-box"> |
|
<div v-for="(item, index) in sign" :key="index" class="sign"> |
|
<div class="sign-photo" :style="{ backgroundImage: `url(${item.img})`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }"> |
|
<div class="count"> |
|
{{ index === 6 ? "10点数" : "1点数" }} |
|
</div> |
|
</div> |
|
<div v-show="item.status !== 2" class="sign-day"> |
|
{{ item.day }} |
|
</div> |
|
<div v-show="item.status === 2" class="sign-get"> |
|
领取 |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="right basis-2/5"> |
|
<div class="earn-points"> |
|
<div class="title-box"> |
|
<div class="dot"> |
|
<img :src="dot" alt=""> |
|
</div> |
|
<div class="name"> |
|
做任务赚积分 |
|
</div> |
|
<div class="dot"> |
|
<img :src="dot" alt=""> |
|
</div> |
|
</div> |
|
<div class="earn-list-box"> |
|
<div v-for="(item, index) in earn" :key="index" class="earn-list"> |
|
<div class="earn-list-left"> |
|
<div class="name"> |
|
{{ item.title }} |
|
</div> |
|
<div v-show="item.status === 1" class="accomplish"> |
|
已获得{{ item.dot }}点数 |
|
</div> |
|
<div v-show="item.status === 0" class="unfinished"> |
|
0/{{ item.dot }} |
|
</div> |
|
</div> |
|
<div class="earn-list-right"> |
|
<div class="add-dot-box"> |
|
<div class="flex items-center"> |
|
<img class="add-dot-photo" :src="money" alt=""> |
|
<div class="add-dot-num"> |
|
+{{ item.dot }} |
|
</div> |
|
</div> |
|
|
|
<div v-show="item.status === 1" class="add-dot-btn accomplish"> |
|
已完成 |
|
</div> |
|
|
|
<div v-if="item.status === 0 && index !== 1" class="add-dot-btn unfinished"> |
|
未完成 |
|
</div> |
|
<div v-if="item.status === 0 && index === 1" class="add-dot-btn invite"> |
|
去邀请 |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.basic-task-box { |
|
width: 95%; |
|
.title { |
|
font-size: 13px; |
|
font-family: PingFang-SC, PingFang-SC; |
|
font-weight: bold; |
|
color: #000000; |
|
line-height: 22px; |
|
letter-spacing: 1px; |
|
margin: 16px 0; |
|
} |
|
.contant { |
|
width: 100%; |
|
column-gap: 10px; |
|
.left { |
|
width: 100%; |
|
|
|
background-image: url(@/assets/images/task/qiandao.png); |
|
background-size: 100% 100%; |
|
padding: 20px; |
|
.top { |
|
width: 100%; |
|
justify-content: space-between; |
|
.login-day { |
|
font-size: 19px; |
|
font-family: PingFang-SC, PingFang-SC; |
|
color: #ffffff; |
|
line-height: 33px; |
|
letter-spacing: 2px; |
|
span { |
|
font-size: 27px; |
|
font-weight: bold; |
|
} |
|
} |
|
.historyBox { |
|
display: flex; |
|
cursor: pointer; |
|
align-items: flex-start; |
|
.historyImg { |
|
width: 13px; |
|
height: 13px; |
|
} |
|
.historyName { |
|
padding-left: 5px; |
|
font-size: 11px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
color: #ffffff; |
|
margin-top: -2px; |
|
} |
|
} |
|
} |
|
.bottom { |
|
margin-top: 15px; |
|
|
|
.accumulate { |
|
width: 100%; |
|
display: flex; |
|
|
|
.three { |
|
width: 30%; |
|
height: 100%; |
|
padding: 3px 0; |
|
text-align: center; |
|
background-color: #ffffff; |
|
font-size: 12px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
color: #4670e3; |
|
border-top-left-radius: 6px; |
|
position: relative; |
|
z-index: 2; |
|
&::after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 10px; |
|
width: 96%; |
|
height: 100%; |
|
background-color: inherit; |
|
transform: skewX(35deg); /* 可调整此值以改变倾斜的程度 */ |
|
transform-origin: 100% 0; |
|
z-index: -1; |
|
} |
|
} |
|
.ten { |
|
width: 70%; |
|
padding: 3px 0; |
|
font-size: 12px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
color: #ffffff; |
|
padding-left: 30px; |
|
} |
|
} |
|
.sign-box { |
|
width: 100%; |
|
height: 100px; |
|
background-color: #ffffff; |
|
border-top-right-radius: 6px; |
|
border-bottom-right-radius: 6px; |
|
border-bottom-left-radius: 6px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-around; |
|
.sign { |
|
.sign-photo { |
|
width: 50px; |
|
height: 64px; |
|
position: relative; |
|
.count { |
|
font-size: 10px; |
|
font-family: PingFang-SC, PingFang-SC; |
|
font-weight: 500; |
|
color: #ff9b00; |
|
text-align: center; |
|
font-weight: bold; |
|
padding-top: 5px; |
|
} |
|
} |
|
.sign-day { |
|
text-align: center; |
|
font-size: 10px; |
|
font-family: PingFang-SC, PingFang-SC; |
|
font-weight: bold; |
|
color: #888c90; |
|
padding-top: 5px; |
|
} |
|
.sign-get { |
|
cursor: pointer; |
|
margin-top: 5px; |
|
width: 100%; |
|
height: 15px; |
|
background: linear-gradient(180deg, #ffb33d 0%, #ff9b00 100%); |
|
border-radius: 11px; |
|
font-size: 11px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
color: #ffffff; |
|
line-height: 15px; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.right { |
|
width: 100%; |
|
padding: 20px 14px; |
|
|
|
background-color: aliceblue; |
|
border-radius: 15px; |
|
.earn-points { |
|
.title-box { |
|
display: flex; |
|
align-items: center; |
|
padding-left: 10px; |
|
.dot { |
|
display: flex; |
|
align-items: center; |
|
} |
|
.name { |
|
padding: 0 7px; |
|
font-size: 13px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 500; |
|
color: #000000; |
|
line-height: 22px; |
|
font-weight: bold; |
|
letter-spacing: 1px; |
|
} |
|
} |
|
.earn-list-box { |
|
margin-top: 15px; |
|
width: 100%; |
|
height: 150px; |
|
|
|
background-color: #ffffff; |
|
border-radius: 4px; |
|
padding: 0 10px; |
|
.earn-list { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
padding: 10px 0; |
|
border-bottom: 1px solid #ededed; |
|
&:last-child { |
|
border: 0; |
|
} |
|
.earn-list-left { |
|
display: flex; |
|
align-items: center; |
|
width: 60%; |
|
.name { |
|
font-size: 12px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 500; |
|
|
|
color: #000000; |
|
|
|
letter-spacing: 1px; |
|
} |
|
.accomplish { |
|
font-size: 9px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
color: #f7b606; |
|
padding-left: 10px; |
|
} |
|
.unfinished { |
|
font-size: 10px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
color: #888c90; |
|
padding-left: 10px; |
|
} |
|
} |
|
.earn-list-right { |
|
width: 40%; |
|
|
|
.add-dot-box { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
.add-dot-photo { |
|
width: 13px; |
|
height: 13px; |
|
display: flex; |
|
align-items: center; |
|
} |
|
.add-dot-num { |
|
font-size: 11px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
color: #f7b500; |
|
padding-left: 3px; |
|
} |
|
.add-dot-btn { |
|
cursor: pointer; |
|
width: 45px; |
|
height: 20px; |
|
border-radius: 16px; |
|
font-size: 10px; |
|
font-family: |
|
PingFangSC, |
|
PingFang SC; |
|
font-weight: 400; |
|
line-height: 20px; |
|
letter-spacing: 1px; |
|
text-align: center; |
|
&.accomplish { |
|
background: linear-gradient( |
|
90deg, |
|
#b5ceff 0%, |
|
#a6baff 100% |
|
); |
|
color: #ffffff; |
|
} |
|
&.unfinished { |
|
background: #ffffff; |
|
border: 1px solid #cdcdcd; |
|
line-height: 18px; |
|
color: #888c90; |
|
} |
|
&.invite { |
|
background: linear-gradient( |
|
90deg, |
|
#6fa3ff 0%, |
|
#486dff 100% |
|
); |
|
color: #ffffff; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|