kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

签到

Browse Source
This commit is contained in:
shijingjing
2023-02-02 16:09:24 +08:00
parent 79ad5e4963
commit 66a2c1fde2
1 changed files with 185 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/project/qianxinan/AppSignIn/AppSignIn.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<div class="AppSignIn">
<div class="title">签到记录</div>
<div class="sign_list">
<div class="sign_card">
<div class="sign_left">08:26</div>
<div class="sign_right">
<div class="time">2023-01-03</div>
<div class="tips">签到成功</div>
</div>
</div>
<div class="sign_card">
<div class="sign_left">08:26</div>
<div class="sign_right">
<div class="time">2023-01-03</div>
<div class="tips">签到成功</div>
</div>
</div>
<div class="sign_card">
<div class="sign_left">08:26</div>
<div class="sign_right">
<div class="time">2023-01-03</div>
<div class="tips">签到成功</div>
</div>
</div>
<div class="sign_card">
<div class="sign_left">08:26</div>
<div class="sign_right">
<div class="time">2023-01-03</div>
<div class="tips">签到成功</div>
</div>
</div>
<div class="sign_card">
<div class="sign_left">08:26</div>
<div class="sign_right">
<div class="time">2023-01-03</div>
<div class="tips">签到成功</div>
</div>
</div>
<div class="sign_card">
<div class="sign_left">08:26</div>
<div class="sign_right">
<div class="time">2023-01-03</div>
<div class="tips">签到成功</div>
</div>
</div>
<div class="sign_card">
<div class="sign_left">08:26</div>
<div class="sign_right">
<div class="time">2023-01-03</div>
<div class="tips">签到成功</div>
</div>
</div>
</div>
<div class="sign_btn">
<div class="btn">
<div>签到</div>
<div>{{ time }}</div>
</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs"
export default {
appName: "签到",
data() {
return {
time: '',
}
},
methods: {
},
onShow() {
document.title = '签到'
setInterval(() => {
this.time = dayjs(new Date()).format('HH:mm:ss')
}, 1000)
}
}
</script>
<style lang="scss" scoped>
.AppSignIn {
padding: 100px 32px 420px 32px;
box-sizing: border-box;
.title {
font-weight: 600;
font-size: 28px;
color: #333333;
width: 100%;
height: 100px;
line-height: 100px;
padding-left: 32px;
box-sizing: border-box;
background: #F5F5F5;
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
.sign_list {
.sign_card {
display: flex;
background: #FFFFFF;
padding: 24px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
border-radius: 16px;
margin-bottom: 24px;
.sign_left {
align-self: center;
font-weight: 600;
font-size: 40rpx;
color: #333333;
margin-right: 32px;
}
.sign_right {
font-weight: 400;
font-size: 26px;
color: #333333;
.tips {
color: #999999;
margin-top: 8px;
}
}
}
}
.sign_btn {
position: relative;
width: 100%;
height: 400px;
position: fixed;
bottom: 0;
left: 0;
background: #F5F5F5;
box-shadow: 0 -4px 8px 0 rgba(0,0,0,0.02);
z-index: 9;
.btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 240px;
height: 240px;
text-align: center;
// background-image: linear-gradient(180deg, #75BDFF 0%, #4783FF 100%);
background-image: linear-gradient(180deg, #bcff75 0%, hsl(132, 87%, 30%) 100%);
border: 8px solid #FFFFFF;
box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
border-radius: 50%;
color: #FFFFFF;
& > div:first-child {
font-weight: 500;
font-size: 40px;
margin-top: 72px;
}
& > div:last-child {
margin-top: 10px;
font-weight: 400;
font-size: 28px;
}
}
}
}
</style>