青鸟ai,pc版仓库
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

<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>