先上图,本人前端工作两个月,属于小白阶段,还请各位大佬勿喷
代码部分:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<link rel="stylesheet" type="text/css" href="../../css/shop.css" />
<style>
#app {
position: fixed;
width: 100%;
height: 100%;
z-index: -2;
background-image: url('../../image/home/bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.header {
position: relative;
width: 100%;
color: #fff;
padding: 1rem 0.6rem 0;
}
.left {
position: absolute;
z-index: 9;
}
.right {
position: absolute;
z-index: 9;
right: 0;
}
.click_box {
height: 5.6rem;
width: 5.6rem;
margin: 1.35rem auto;
}
.right {
width: 1.6rem;
height: 1.6rem;
}
.click_after {
height: 6rem;
width: 6rem;
position: absolute;
z-index: -11;
}
.date_box {
position: relative;
background-image: url('../../image/home/calendar.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 21.7rem;
/* width: 17.8rem; */
/* position: relative; */
/* z-index: -111; */
margin: 0 0.6rem;
}
.calendar {
position: absolute;
}
.calendar_title {
padding-top: 0.6rem;
color: #F89D38;
}
.footer_btn {
position: absolute;
color: #FFFFFF;
left: 2.1rem;
right: 2.1rem;
bottom: 1.33rem;
height: 2.1rem;
background: rgba(248, 157, 56, 1);
border: 1px solid rgba(248, 157, 56, 1);
box-shadow: 0px 0px 4px 0px rgba(255, NaN, 90, 0.35);
border-radius: 25px;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
}
.popup {
position: fixed;
height: 12.85rem;
top: 8.875rem;
background: url('../../image/home/popup.png');
background-size: 100% 100%;
z-index: 999;
left: 4.2rem;
right: 4.2rem;
color: #999999;
}
.success {
color: #F16E24;
font-size: 21px;
margin: 8rem 0 0.5rem;
}
.ok_btn {
height: 2.25rem;
background: linear-gradient(90deg, rgba(241, 109, 36, 1) 0%, rgba(250, 175, 72, 1) 100%);
border-radius: 23px;
margin: 1rem 1.9rem;
padding-top: 0.65rem;
}
.out {
height: 2.35rem;
width: 2.35rem;
margin: 1.5rem auto;
}
.week {
margin: 2.5rem 1.5rem 0.8rem 1.5rem;
color: #fff;
}
.days {
margin: 0 0.6rem;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-items: center;
}
.day {
/* margin: 0.5rem 1.5rem 0 1.5rem; */
height: 2.4rem;
width: 2.4rem;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<header class="header aui-row">
<a οnclick="closeWin();" tapmode>
<span class="left aui-iconfont aui-icon-back aui-text-white aui-font-size-20"></span></a>
<a tapmode> <span class="right aui-iconfont aui-icon-back aui-text-white aui-font-size-20"></span></a>
<div class="title aui-title font-w aui-font-size-18 aui-text-center">签到领好礼</div>
</header>
<!-- 签到按钮 -->
<div class="click_box pos-rela">
<!-- 未签到 -->
<div class="clickbtn" v-show="isclick" οnclick="app.onChange()"><img src="../../image/home/clickbtn.png"
alt=""></div>
<!-- 已签到 -->
<div v-show="!isclick"><img class="click_after" src="../../image/home/sign_title.png" alt="">
<div class="flex-c jus-center aui-text-center">
<!-- <img class="right" src="../../image/home/right.png" alt=""> -->
<div class="aui-font-size-12">已签到</div>
</div>
</div>
</div>
<!-- 日历列表 -->
<div class="date_box">
<div class="calendar_title aui-font-size-20 aui-text-center">{{month}}月签到赢好礼</div>
<div class="week flex-r jus-between">
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
</div>
<div class="days jus-between">
<div v-for="(item,index) in days" :index="index" :class="{active:item==today}" class="day">
<span class="sort">{{item}}</span>
</div>
</div>
<div class="footer_btn aui-font-size-14 flex-r ali-center jus-center" οnclick="app.openPopup()">
已连续签到{{day}}天,共领取{{score}}积分</div>
</div>
<!-- 弹窗 -->
<div v-show="!isshow" class="mask">
<div class="popup aui-text-center">
<!-- <img src="../../image/home/popup.png" alt=""> -->
<div class="success">签到成功</div>
<div class="aui-font-size-13">恭喜获得10积分</div>
<div class="ok_btn text-center aui-text-white" οnclick="app.close()">好的，知道了</div>
<div class="out" οnclick="app.close()"><img src="../../image/home/out.png" alt=""></div>
</div>
</div>
</div>
<!-- <div class="none-div"><div>暂无相关信息</div></div> -->
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vue-lazyload.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var app;
Vue.use(VueLazyload, {
error: '../../image/default.png',
loading: '../../image/default.png'
});
apiready = function () {
barStyle(0);
initVue();
// 下拉刷新
api.setRefreshHeaderInfo({
loadingImg: 'widget://image/refresh.png',
bgColor: '#fff',
textColor: '#666',
textDown: '下拉刷新...',
textUp: '松开刷新...'
}, function (ret, err) {
setTimeout(function () {
api.refreshHeaderLoadDone();
}, 500);
});
// 上拉加载更多
api.addEventListener({ name: 'scrolltobottom', }, function (ret, err) {
});
};
// 初始化Vue
function initVue() {
app = new Vue({
el: '#app',
data: {
month: 0,
day: 0,
score: 10,
isclick: true,
isshow: true,
today: 2,
days: [],
},
created: function () {
this.getDays();
},
mounted() {
},
methods: {
//本月天数
getDays() {
let that = this;
//获取date对象
var nowdate = new Date();
//date对象月份默认从0开始所以+1
let month = nowdate.getMonth() + 1;
//当前是几月份
that.month = month;
//定义数组days[]
let days = [];
// 当月第一天是星期几
let firstday = new Date(nowdate.getFullYear(), (nowdate.getMonth()), 1).getDay();
// console.log(firstday);
var month_day = new Date(nowdate.getFullYear(), (nowdate.getMonth() + 1), 0).getDate();
// console.log(month_day);
for (let i = 0; i < month_day; i++) {
days.push(i + 1);
}
// 当月首日前位置补‘’
for (let j = 0; j < firstday; j++) {
days.unshift('');
}
// 获取日历的行数
let len = days.length;
let line = Math.ceil(len / 7);
//当月最后一日后位置补‘’
for (let k = 0; k < line * 7 - len; k++) {
days.push('');
}
that.days = days;
// console.log(that.days);
// this.days = days;
},
// 弹框
openPopup() {
let that = this;
that.isshow = false;
},
// 签到按钮
onChange() {
let that = this;
that.isclick = false;
},
// 关闭弹窗
close() {
let that = this;
that.isshow = true;
}
}
});
}
</script>
</html>
扫一扫
603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
