zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

阶段性上传

Browse Source
This commit is contained in:
@fawn-nine
2023-09-08 18:06:39 +08:00
parent 7b9044f4df
commit b0cc2b8663
62 changed files with 5075 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
pages/clock/clockList - 副本.vue Normal file
View File

@@ -0,0 +1,393 @@
<template>
<view class="container">
<z-nav-bar title="打卡记录"></z-nav-bar>
<view class="calendar_container">
<zsy-calendar :mode="mode" @change="change" />
</view>
<view class="container1">
<view class="subContent">
<!-- 已打卡 -->
<view class="had">
<view class="item flexbox">
<view class="dateName flexbox">
<span>第<em>365</em>天</span>
</view>
<view class="bookinfo">
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<view class="images flexbox">
<image @click="previewImage()"
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
<image
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
</view>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<view class="images flexbox">
<image @click="previewImage()"
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
<image
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
</view>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
</view>
</view>
<view class="item flexbox">
<view class="dateName flexbox">
<span>第<em>36</em>天</span>
</view>
<view class="bookinfo">
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<view class="images flexbox">
<image @click="previewImage()"
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
<image
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
</view>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<view class="images flexbox">
<image @click="previewImage()"
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
<image
src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
mode="aspectFill"></image>
</view>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
import musicPlay from '@/components/music.vue'
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
mode: 'open',
status : 0
}
},
// 返回顶部
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 下拉刷新
onReachBottom() {
this.status = 0
if (this.bookScreen.page < this.totalPage) {
this.bookScreen.page = this.bookScreen.page + 1
setTimeout(() => {
this.$http
// .post('book/book/list', this.bookScreen)
.post('book/shopproduct/selectList?limit=8&page=1&key='+this.bookScreen.bookName)
.then(res => {
this.totalPage = res.page.totalPage
for (let i in res.page.list) {
this.bookList.push(res.page.list[i])
}
});
}, 1000)
} else {
this.status = 1
}
},
onLoad() {
this.getmyWord()
},
methods: {
change(e) {
console.log(e)
},
getmyWord(){
this.$http
.post('book/clockin/myinfo?userid='+this.userInfo.id)
.then(res => {
console.log(res,'我的打卡内容')
})
.catch(e => {
console.log(e)
})
},
},
components: {
musicPlay,
zsyCalendar
},
computed:{
...mapState(['userInfo'])
}
}
</script>
<style lang="scss" scoped>
.listenList{
.wrap{width: 150rpx;}
}
.task {
margin-top: 40rpx 20rpx;
.taskinfo {
video {
width: 100%;
}
}
}
.subContent {
overflow: hidden;
.clockTitle {
color: #55aa7f;
font-size: 38rpx;
text-align: center;
display: block;
margin-top: 30rpx;
}
}
.container1 {
.margin-top {
margin-top: 30rpx;
overflow: hidden;
}
}
.container {
padding: 30rpx;
}
.calendar_container {
//min-height: calc(60vh);
background-color: #f5f5f5;
//padding: 30rpx;
box-sizing: border-box;
}
.had {
margin-top: 30rpx;
h3 {
color: #8c9a92;
font-size: 34rpx;
}
.content {
line-height: 60rpx;
margin-top: 30rpx;
font-size: 30rpx;
color: #0e0e15;
}
.images {
height: 150rpx;
overflow: hidden;
margin-top: 30rpx;
image {
width: 150rpx;
margin: 0 10rpx;
}
}
.opBtns {
margin-top: 30rpx;
span {
color: #b3b3b3;
padding-left: 20rpx;
font-size: 24rpx;
}
}
.item {
padding-left: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
justify-content: space-between;
.dateName {
color: #444;
text-align: center;
align-items: center;
width: 80rpx;
padding-right: 20rpx;
border-right: 1px solid #eee;
span {
display: inline-block;
height: 120rpx;
padding: 20rpx 0;
border-radius: 50rpx;
width: 100%;
background-color: #d9e8f7;
text-align: center;
em {
font-weight: bold;
font-style: normal;
}
}
}
.bookinfo {
text-align: center;
// width: 100%;
// padding: 20rpx;
margin-left: 20rpx;
.case{ margin-top:60rpx; background-color: #fff; padding: 20rpx;}
.content {
position: relative; padding-bottom: 60rpx; height: 60px; overflow: hidden;
}
.book {
image {
width:200rpx;
height: 150rpx;
margin: 0 auto;
}
.clockInfo{text-align: left; margin-left: 20rpx;}
span {
color: #444;
display: block;
font-weight: bold;
margin-bottom: 20rpx;
}
}
}
}
}
.viewMore {
position: absolute;
bottom: 5rpx;
right: 0; color: #409eff;
z-index: 1; text-align: right;
width: 200rpx; background-image: url('@/static/icon/zuotouming.png'); background-position: right; background-size: cover; background-repeat: no-repeat;
}
.flexbox {
display: flex;
}
</style>