153 lines
3.4 KiB
Vue
153 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const indexData = ref([1, 2, 3, 4])
|
|
|
|
const onItem = item => {
|
|
if (indexData.value.includes(item)) {
|
|
return
|
|
}
|
|
indexData.value.push(item)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="punch">
|
|
<nav-bar>
|
|
<template #back>
|
|
<image
|
|
src="/static/images/public/return-icon.png"
|
|
mode="heightFix"
|
|
class="top-left-icon"
|
|
></image>
|
|
</template>
|
|
</nav-bar>
|
|
<view class="public-header—box">
|
|
<view class="integral-box">
|
|
<text>我的积分</text>
|
|
<text>410</text>
|
|
</view>
|
|
<image
|
|
src="/static/images/discover/calendar.png"
|
|
mode="aspectFit"
|
|
class="right-icon"
|
|
></image>
|
|
</view>
|
|
|
|
<view class="punch-box">
|
|
<view class="top-title">
|
|
<text class="title">每日签到领积分</text>
|
|
<view class="right-box">
|
|
<text>已连续签到</text>
|
|
<text>05</text>
|
|
<text>天</text>
|
|
</view>
|
|
</view>
|
|
<!-- 签到列表 -->
|
|
<view class="list-box">
|
|
<view
|
|
v-for="item in 30"
|
|
:key="item"
|
|
:class="{ active: indexData.includes(item) }"
|
|
class="item"
|
|
@click="onItem(item)"
|
|
>
|
|
<view class="bg-box">
|
|
<image
|
|
src="/static/images/discover/bean.png"
|
|
mode="heightFix"
|
|
class="icon"
|
|
></image>
|
|
<text>+10</text>
|
|
</view>
|
|
<text class="bottom-name">今天</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './styles/index.scss';
|
|
.punch-box {
|
|
padding: 0 24rpx;
|
|
.top-title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.right-box {
|
|
margin-left: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
text {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
&:nth-child(2) {
|
|
margin: 0 4rpx;
|
|
color: #00d993;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-box {
|
|
margin-top: 38rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
grid-gap: 22rpx;
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.bg-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 80rpx;
|
|
height: 100rpx;
|
|
background: #f4f4f4;
|
|
border-radius: 8rpx;
|
|
.icon {
|
|
height: 48rpx;
|
|
}
|
|
text {
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.bottom-name {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.active {
|
|
.bg-box {
|
|
background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
|
|
text {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.bottom-name {
|
|
color: #00d993;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|