提交 a35a72cf authored 作者: 王鹏飞's avatar 王鹏飞

updates

上级 5c57fee1
......@@ -62,9 +62,9 @@ Component({
methods: {
init() {
this.getShare().then(res => {
// if (!this.data.isNeed && !res.data.need_share) {
// return
// }
if (!this.data.isNeed && !res.data.need_share) {
return
}
app.getUser().then(res => {
res.realname = res.realname || res.nickname
if (res.avatar) {
......@@ -140,7 +140,7 @@ Component({
this.widget = this.selectComponent('.widget')
setTimeout(() => {
this.widget
.renderToCanvas({ wxml: wxml(this.data), style })
.renderToCanvas({ wxml: wxml(this.data), style: style(this.data) })
.then(res => {
wx.hideLoading()
})
......@@ -162,7 +162,7 @@ Component({
wx.showToast({ title: '保存成功', icon: 'none' })
})
.catch(error => {
wx.showToast({ title: '保存失败', icon: 'none' })
wx.showToast({ title: '保存失败,请检查相册权限', icon: 'none' })
})
})
},
......
......@@ -24,9 +24,8 @@
<view class="text">{{ controls.text }}</view>
<view class="footer">
<view class="footer-left">
<view class="tips"
>我已坚持学习<text class="num">{{ share.used_day }}</text
>天</view
<view class="tips">
我已坚持学习<text class="num"> {{ share.used_day }} </text>天</view
>
<view>我离学位殿堂又近了一步</view>
</view>
......
......@@ -18,108 +18,111 @@
overflow-y: auto;
}
.share {
width: 600rpx;
height: 1064rpx;
width: 300px;
height: 532px;
position: relative;
overflow: hidden;
}
.bg {
width: 600rpx;
height: 1064rpx;
width: 300px;
height: 532px;
}
.cover {
position: absolute;
top: 70rpx;
left: 32rpx;
width: 534rpx;
height: 924rpx;
top: 36px;
left: 17px;
width: 267px;
height: 462px;
}
.main {
position: absolute;
left: 82rpx;
top: 230rpx;
/* right: 82rpx; */
width: 436rpx;
left: 40px;
top: 120px;
/* right: 41px; */
width: 220px;
}
.teacher {
font-size: 26rpx;
font-size: 13px;
font-weight: bold;
color: #d78c4a;
line-height: 32rpx;
line-height: 16px;
}
.course {
font-size: 26rpx;
font-size: 13px;
font-weight: bold;
color: #d78c4a;
line-height: 32rpx;
line-height: 16px;
margin-left: -5px;
}
.user {
margin-top: 20rpx;
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.avatar {
width: 130rpx;
height: 130rpx;
width: 65px;
height: 65px;
border-radius: 50%;
overflow: hidden;
}
.nickname {
font-size: 30rpx;
margin-top: 2px;
font-size: 15px;
font-weight: bold;
color: #d78c4a;
line-height: 48rpx;
line-height: 1;
}
.chapter {
margin-top: 10rpx;
margin-left: 18rpx;
margin-right: 18rpx;
height: 64rpx;
font-size: 28rpx;
margin-top: 6px;
margin-left: 8px;
margin-right: 8px;
height: 32px;
font-size: 14px;
font-weight: bold;
color: #1a1a1a;
line-height: 32rpx;
line-height: 16px;
text-align: center;
overflow: hidden;
}
.text {
margin-top: 116rpx;
margin-left: 30rpx;
margin-right: 30rpx;
height: 72rpx;
font-size: 26rpx;
font-weight: 500;
margin-top: 56px;
margin-left: 12px;
margin-right: 12px;
height: 36px;
font-size: 13px;
font-weight: bold;
/* font-style: italic; */
color: #1a1a1a;
line-height: 36rpx;
line-height: 18px;
overflow: hidden;
}
.footer {
display: flex;
align-items: center;
margin-top: 30rpx;
margin-left: 18rpx;
margin-right: 18rpx;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
.footer-left {
flex: 1;
font-size: 24rpx;
font-size: 12px;
color: #1a1a1a;
line-height: 36rpx;
line-height: 18px;
}
.footer-left .tips {
display: flex;
align-items: center;
}
.num {
font-size: 34rpx;
font-size: 17px;
color: #d78c4a;
font-weight: Bold;
font-weight: bold;
}
.footer-right {
width: 98rpx;
height: 98rpx;
width: 50px;
height: 50px;
}
.controls {
position: relative;
......@@ -134,36 +137,35 @@
background-color: #fff;
}
.controls.is-show .controls-main {
height: 260rpx;
height: 130px;
}
.buttons {
position: absolute;
top: -132rpx;
top: -66px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 16rpx 26rpx;
padding: 8px 13px;
}
.button {
position: relative;
width: 100rpx;
height: 100rpx;
width: 50px;
height: 50px;
background: #ffffff;
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-radius: 50%;
font-size: 26rpx;
font-weight: 400;
font-size: 13px;
color: #d78c4a;
line-height: 30rpx;
line-height: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wx-image {
width: 100rpx;
height: 100rpx;
width: 50px;
height: 50px;
}
.wx-button {
position: absolute;
......@@ -182,12 +184,12 @@ button::after {
}
.controls-tabs {
display: flex;
height: 60rpx;
height: 30px;
background: #ccc;
}
.controls-tab {
width: 150rpx;
line-height: 60rpx;
width: 75px;
line-height: 30px;
text-align: center;
background-color: #e6e6e6;
}
......@@ -197,57 +199,57 @@ button::after {
}
.controls-content {
flex: 1;
height: 200rpx;
padding: 0 20rpx;
height: 100px;
padding: 0 10px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.controls-content .is-active {
border: 5rpx solid #d78c4a;
border: 3px solid #d78c4a;
}
.controls-bg-item {
flex: 0 0 92rpx;
width: 92rpx;
height: 162rpx;
margin: 0 30rpx;
border: 5rpx solid #fff;
border-radius: 5rpx;
flex: 0 0 46px;
width: 46px;
height: 80px;
margin: 0 15px;
border: 3px solid #fff;
border-radius: 3px;
overflow: hidden;
}
.controls-text-item {
margin: 0 30rpx;
flex: 0 0 455rpx;
width: 455rpx;
height: 125rpx;
margin: 0 15px;
flex: 0 0 228px;
width: 228px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 5rpx solid #ccc;
border-radius: 12rpx;
border: 3px solid #ccc;
border-radius: 6px;
overflow: hidden;
padding: 30rpx;
font-size: 26rpx;
padding: 12px;
font-size: 13px;
color: #1a1a1a;
line-height: 36rpx;
line-height: 18px;
box-sizing: border-box;
}
.controls-avatar-item {
position: relative;
margin: 0 30rpx;
flex: 0 0 120rpx;
width: 120rpx;
height: 125rpx;
margin: 0 15px;
flex: 0 0 60px;
width: 60px;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 5rpx solid #ccc;
border: 3px solid #ccc;
border-radius: 50%;
overflow: hidden;
font-size: 26rpx;
font-size: 13px;
color: #1a1a1a;
line-height: 36rpx;
line-height: 18px;
box-sizing: border-box;
}
.image {
......@@ -266,14 +268,14 @@ button::after {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 75rpx 0;
padding: 38px 0;
}
.close {
position: absolute;
right: 16rpx;
top: 16rpx;
width: 96rpx;
height: 96rpx;
right: 8px;
top: 8px;
width: 48px;
height: 48px;
background: url('https://webapp-pub.ezijing.com/weapp/share/close.png') no-repeat;
background-size: contain;
z-index: 999;
......@@ -287,18 +289,18 @@ button::after {
overflow-y: auto;
}
.share-preivew .button {
width: 500rpx;
height: 100rpx;
border-radius: 50rpx;
width: 250px;
height: 50px;
border-radius: 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 35rpx 0;
font-size: 26rpx;
margin: 18px 0;
font-size: 13px;
font-weight: 400;
color: #d78c4a;
line-height: 30rpx;
line-height: 15px;
}
.share-preivew .button-default {
color: #d78c4a;
......@@ -309,9 +311,9 @@ button::after {
background: #d78c4a;
}
.share-preivew .tips {
font-size: 26rpx;
font-size: 13px;
font-weight: 400;
color: #fff;
line-height: 40rpx;
line-height: 15px;
text-align: center;
}
const wxml = function (data) {
return `
<view class="share">
<image src="${data.controls.bg}?x-oss-process=image/resize,m_fill,h_530,w_300" class="bg"></image>
<image src="${data.controls.bg}?x-oss-process=image/resize,m_fill,h_532,w_300" class="bg"></image>
<image src="https://webapp-pub.ezijing.com/weapp/share/cover.png" class="cover"></image>
<view class="main">
<text class="teacher">${data.share.lecturer.lecturer_name}</text>
......@@ -23,19 +23,21 @@ const wxml = function (data) {
</view>`
}
const style = {
const style = function (data) {
const numLength = data.share.used_day.toString().length
return {
share: {
position: 'relative',
width: 300,
height: 530
height: 532
},
bg: {
width: 300,
height: 530
height: 532
},
cover: {
position: 'absolute',
top: 35,
top: 36,
left: 17,
width: 267,
height: 462
......@@ -43,26 +45,27 @@ const style = {
main: {
position: 'absolute',
left: 40,
top: 119,
top: 120,
width: 220,
height: 300
},
teacher: {
height: 14,
height: 16,
fontSize: 13,
lineHeight: 1,
color: '#D78C4A',
verticalAlign: 'middle'
fontWeight: 'bold',
lineHeight: 16,
color: '#D78C4A'
},
course: {
height: 14,
marginLeft: -5,
height: 16,
fontSize: 13,
lineHeight: 14,
color: '#D78C4A',
verticalAlign: 'middle'
fontWeight: 'bold',
lineHeight: 16,
color: '#D78C4A'
},
user: {
marginTop: 12,
marginTop: 10,
flexDirection: 'column',
alignItems: 'center'
},
......@@ -72,18 +75,17 @@ const style = {
borderRadius: 32.5
},
nickname: {
marginTop: 4,
marginTop: 2,
width: 220,
height: 14,
textAlign: 'center',
verticalAlign: 'middle',
fontSize: 13,
lineHeight: 14,
height: 16,
fontSize: 15,
fontWeight: 'bold',
lineHeight: 16,
color: '#D78C4A',
textAlign: 'center'
},
chapter: {
marginTop: 8,
marginTop: 6,
width: 220,
height: 32,
fontSize: 14,
......@@ -93,7 +95,7 @@ const style = {
textAlign: 'center'
},
text: {
marginTop: 55,
marginTop: 56,
marginLeft: 12,
width: 200,
height: 36,
......@@ -104,11 +106,11 @@ const style = {
lineHeight: 18
},
footer: {
marginTop: 15,
marginLeft: 15,
marginRight: 15,
width: 190,
height: 60,
marginTop: 12,
height: 50,
flexDirection: 'row',
alignItems: 'center'
},
......@@ -127,37 +129,36 @@ const style = {
height: 20,
fontSize: 12,
lineHeight: 20,
color: '#1A1A1A',
verticalAlign: 'middle'
color: '#1A1A1A'
},
t2: {
width: 40,
width: numLength * 12,
height: 20,
fontSize: 17,
fontWeight: 'bold',
lineHeight: 20,
color: '#D78C4A',
textAlign: 'center'
},
t3: {
width: 40,
width: 12,
height: 20,
fontSize: 12,
lineHeight: 20,
color: '#1A1A1A',
verticalAlign: 'middle'
color: '#1A1A1A'
},
tips: {
width: 140,
height: 20,
fontSize: 12,
lineHeight: 20,
color: '#1A1A1A',
verticalAlign: 'middle'
color: '#1A1A1A'
},
footerRight: {
width: 50,
height: 50
}
}
}
export { wxml, style }
......@@ -7,9 +7,9 @@
.course-intro .list-teacher { margin-top: 50rpx; padding: 0 25rpx; }
.course-intro .list-teacher .img { float: left; width: 150rpx; height: 150rpx; background: #c9c9c9; }
.course-intro .list-teacher .ctx { position: relative; margin-left: 170rpx; height: 150rpx; }
.course-intro .list-teacher .ctx .top-ctx { position: absolute; top: -4rpx; width: 100%; overflow: hidden; }
.course-intro .list-teacher .ctx .top-ctx {}
.course-intro .list-teacher .ctx .top-ctx .tit { font-size: 28rpx; color: #313131; line-height: 37rpx; overflow: hidden; word-break: break-all; }
.course-intro .list-teacher .ctx .bottom-ctx { position: absolute; top: 50rpx; width: 100%; overflow: hidden; }
.course-intro .list-teacher .ctx .bottom-ctx { }
.course-intro .list-teacher .ctx .bottom-ctx .t1 { font-size: 22rpx; line-height: 30rpx; color: #707070; overflow: hidden; word-break: break-all; }
.course-intro .list-teacher .ctx .bottom-ctx .t2 { font-size: 22rpx; line-height: 30rpx; color: #707070; overflow: hidden; word-break: break-all; }
.course-intro .list-teacher .ctx .bottom-ctx .t3 { font-size: 22rpx; color: #707070; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论