Skip to content

H
h5-base
Commit 578ebfdb authored by chenyishuai@singsingenglish.com's avatar chenyishuai@singsingenglish.com
Browse files
Options

78

parent 9c06fc52
Hide whitespace changes
Inline Side-by-side
Showing with 380 additions and 458 deletions
src/components/buy/activity.vue
View file @ 578ebfdb
<template> <template>
<div> <div>
<div class="activity"> <div class="activity">
<img class="headerImg" :src="header1" /> <img class="headerImg" :src="header1">
<img class="headerImg" :src="header2" /> <img class="headerImg" :src="header2">
<div class="inviteContainer"> <div class="inviteContainer">
<img class="invite-title" :src="inviteResultTitle" /> <img class="invite-title" :src="inviteResultTitle">
<img class="invite-icon" :src="header_icon" /> <img class="invite-icon" :src="header_icon"/>
<div class="invite-list"> <div class="invite-list">
<div class="flex-center i-title"> <div class="flex-center i-title">
<span>受邀购买</span> <span>受邀购买</span>
...@@ -21,287 +21,235 @@ ...@@ -21,287 +21,235 @@
<ul class="p-list"> <ul class="p-list">
<li v-for="data in inviteList"> <li v-for="data in inviteList">
<div class="flex-start no-margin"> <div class="flex-start no-margin">
<img :src="data.avatar" /> <img :src="data.avatar"/>
<span>{{data.nickname}}</span> <span>{{data.nickname}}</span>
</div> </div>
<span class="no-margin">{{data.pay_at | formatDate}}</span> <span class="no-margin">{{data.pay_at | formatDate}}</span>
</li> </li>
</ul> </ul>
<img v-if="total > 3" class="moreBtn" :src="moreResult" @click="goToInviteList" /> <img v-if="total > 3" class="moreBtn" :src="moreResult" @click="goToInviteList">
</template> </template>
</div> </div>
<img class="headerImg" :src="header4" /> <img class="headerImg" :src="header4">
<div class="invite-btn"> <div class="invite-btn">
<img :src="inviteBtn" @click="goToInvite" /> <img :src="inviteBtn" @click="goToInvite">
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import QRCode from "qrcodejs2"; import QRCode from 'qrcodejs2'
import { import {getwechatParam,getGoodsDetailApi,getGroupDetailApi,getStatusWechatApi,getInviteResultApi,getInviteListApi} from "../../service/api";
getwechatParam, import refBg from '../../assets/refBg.png'
getGoodsDetailApi, import moreUrl from '../../assets/moreIcon.png'
getGroupDetailApi, import refIcon from '../../assets/refIcon.png'
getStatusWechatApi, import weChatIcon from '../../assets/wechatIcon.png'
getInviteResultApi, import weChatQrUrl from '../../assets/weChatCode.png'
getInviteListApi import closeUrl from '../../assets/closemy.png'
} from "../../service/api"; import html2canvas from 'html2canvas'
import refBg from "../../assets/refBg.png";
import moreUrl from "../../assets/moreIcon.png";
import refIcon from "../../assets/refIcon.png";
import weChatIcon from "../../assets/wechatIcon.png";
import weChatQrUrl from "../../assets/weChatCode.png";
import closeUrl from "../../assets/closemy.png";
import html2canvas from "html2canvas";
import header_1 from "../../assets/activity/title1.png"; import header_1 from '../../assets/activity/title1.png'
import header_icon from "../../assets/activity/icon.png"; import header_icon from '../../assets/activity/icon.png'
import header_2 from "../../assets/activity/21.png"; import header_2 from '../../assets/activity/21.png'
import header_3 from "../../assets/activity/31.jpg"; import header_3 from '../../assets/activity/31.jpg'
import header_4 from "../../assets/activity/4.png"; import header_4 from '../../assets/activity/4.png'
import invite_result_title from "../../assets/activity/invite_result.png"; import invite_result_title from '../../assets/activity/invite_result.png'
import more_result from "../../assets/activity/more.png"; import more_result from '../../assets/activity/more.png'
import invite_poster from "../../assets/activity/btn.png"; import invite_poster from '../../assets/activity/btn.png'
import noData from "../../assets/activity/no_data.png"; import noData from '../../assets/activity/no_data.png'
export default { export default {
name: "index", name: "index",
data() { data(){
return { return {
header1: header_1, header1: header_1,
header2: header_2, header2: header_2,
header3: header_3, header3:header_3,
header_icon: header_icon, header_icon:header_icon,
header4: header_4, header4: header_4,
inviteResultTitle: invite_result_title, inviteResultTitle: invite_result_title,
moreResult: more_result, moreResult: more_result,
inviteBtn: invite_poster, inviteBtn: invite_poster,
refBg: refBg, refBg:refBg,
join: false, join:false,
popType: false, popType:false,
popFill: false, popFill:false,
popupVisible: false, popupVisible:false,
refVisible: false, refVisible:false,
tabType: true, tabType:true,
popcontentW: `您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`, popcontentW:`您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`,
popcontentT: `为了更好地为您进行课程服务，<br>请扫码添加老师二维码`, popcontentT:`为了更好地为您进行课程服务，<br>请扫码添加老师二维码`,
qrCode: weChatQrUrl, qrCode:weChatQrUrl,
weChatIcon: weChatIcon, weChatIcon:weChatIcon,
closeUrl: closeUrl, closeUrl:closeUrl,
moreUrl: moreUrl, moreUrl:moreUrl,
refIcon: refIcon, refIcon:refIcon,
noData: noData, noData: noData,
QRCodeB: false, QRCodeB:false,
dataURL: null, dataURL:null,
user_id: null, user_id:null,
invite_code_f: true, invite_code_f:true,
invite_code: "", invite_code:'',
shopId: "", shopId:'',
groupId: null, groupId:null,
groupDetail: false, groupDetail:false,
groupData: null, groupData:null,
earnings: 0, earnings: 0,
userNum: 0, userNum: 0,
inviteList: [], inviteList: [],
total: 0, total:0,
shareTitle: "钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金", shareTitle: '钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金',
shareDesc: "21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！" shareDesc: '21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！'
};
},
filters: {
formatDate(value) {
if (value) {
return value.split(" ")[0];
} else {
return "";
}
}
},
mounted() {
this.getInviteResult();
this.getInviteList();
this.enableShare();
},
methods: {
goToInvite() {
let query = {};
if (window.location.href.indexOf("shopId") > -1) {
query.shopId = this.$route.query.shopId;
}
if (window.location.href.indexOf("groupId") > -1) {
query.groupId = this.$route.query.groupId;
}
if (window.location.href.indexOf("invite_code") > -1) {
query.invite_code = this.$route.query.invite_code;
}
this.$router.push({ name: "activityInvite", query: query });
},
goToInviteList() {
let query = {};
if (window.location.href.indexOf("shopId") > -1) {
query.shopId = this.$route.query.shopId;
}
if (window.location.href.indexOf("groupId") > -1) {
query.groupId = this.$route.query.groupId;
}
if (window.location.href.indexOf("invite_code") > -1) {
query.invite_code = this.$route.query.invite_code;
} }
this.$router.push({ name: "inviteList", query: query });
}, },
refshow() { filters: {
Toast.loading({ formatDate(value){
mask: true, if(value) {
message: "" return value.split(' ')[0]
}); } else {
if (document.body.scrollTop < 10) { return ''
document.body.scrollTop = 20;
document.documentElement.scrollTop = 20;
}
if (
localStorage.getItem("cc_token") &&
localStorage.getItem("cc_token") !== ""
) {
setTimeout(() => {
Toast.clear();
if (!this.invite_code) {
this.invite_code = "CC-USER";
}
this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
let invite_code = this.invite_code.split("-");
if (
invite_code.length > 2 &&
(invite_code[1] === "TEACHER" || invite_code[1] === "XXMM")
) {
invite_code[1] = "USER";
} }
let code = `${invite_code[0]}-${invite_code[1]}`;
let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}`;
if (this.groupId && this.groupId !== "null") {
URL += `&groupId=${this.groupId}`;
}
this.qrcode(URL);
this.refVisible = true;
this.$nextTick(() => {
if (!this.dataURL) {
setTimeout(() => {
let { height, width } = document
.getElementById("capture")
.getClientRects()[0];
document.getElementById("capture").style.width = width + "px";
let o = this.getOffsetRect(this.$refs.imageWrapper);
let { height1, width1 } = document
.getElementById("capture")
.getClientRects()[0];
html2canvas(document.getElementById("capture"), {
async: true,
timeout: 500,
scrollX: 1,
scale: 3,
width: width1,
height: height1,
letterRendering: true
})
.then(canvas => {
let dataURL = canvas.toDataURL("image/jpg");
this.dataURL = dataURL;
})
.catch(res => {
alert(res);
console.log();
});
}, 500);
} else {
}
});
}, 500);
} else {
let query = { retUrl: this.$route.fullPath, is_new_user_url: "1" };
this.$router.push({ name: "author", query: query });
} }
}, },
getOffsetRect(ele) { mounted(){
var box = ele.getBoundingClientRect(); this.getInviteResult();
var body = document.body, this.getInviteList();
docElem = document.documentElement; this.enableShare();
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft =
window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop,
clientLeft = docElem.clientLeft || body.clientLeft;
var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top: Math.round(top),
left: Math.round(left)
};
}, },
qrcode(data) { methods:{
if (this.QRCodeB) { goToInvite(){
this.QRCodeB.makeCode(data); let query = {};
} else { if(window.location.href.indexOf('shopId')>-1){
this.QRCodeB = new QRCode("qrcode", { query.shopId = this.$route.query.shopId;
width: 80, }
height: 80, // 高度 if(window.location.href.indexOf('groupId')>-1){
text: data, // 二维码内容 query.groupId = this.$route.query.groupId;
image: "" }
}); if(window.location.href.indexOf('invite_code')> -1) {
} query.invite_code = this.$route.query.invite_code;
}, }
// 分享 this.$router.push({name:'activityInvite',query:query})
enableShare: function() { },
let that = this; goToInviteList(){
getwechatParam({ let query = {};
api_list: "onMenuShareAppMessage,onMenuShareTimeline", if(window.location.href.indexOf('shopId')>-1){
url: window.location.href.split("#")[0] query.shopId = this.$route.query.shopId;
}).then(wechatRes => { }
wx.config({ if(window.location.href.indexOf('groupId')>-1){
debug: false, query.groupId = this.$route.query.groupId;
appId: wechatRes.appId, }
timestamp: parseInt(wechatRes.timestamp), if(window.location.href.indexOf('invite_code')> -1) {
nonceStr: wechatRes.nonceStr, query.invite_code = this.$route.query.invite_code;
signature: wechatRes.signature, }
jsApiList: wechatRes.jsApiList this.$router.push({name:'inviteList',query:query})
},
refshow(){
Toast.loading({
mask: true,
message: ''
}); });
wx.ready(function() { if(document.body.scrollTop < 10){
wx.onMenuShareTimeline({ document.body.scrollTop = 20;
title: that.shareTitle, // 分享标题 document.documentElement.scrollTop = 20;
desc: that.shareDesc, // 分享描述 }
link: window.location.href, // 分享链接 if(localStorage.getItem('cc_token') && localStorage.getItem('cc_token') !== ''){
imgUrl: setTimeout(()=>{
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标 Toast.clear()
success: function() { if(!this.invite_code){
console.log("分享成功"); this.invite_code = 'CC-USER'
window._hmt.push([
"_trackEvent",
"分享",
"商品页好友分享",
`id${that.shopId}`
]); //百度统计
},
cancel: function() {
// alert("失败")
console.log("分享失败");
} }
this.user_id=JSON.parse(localStorage.getItem('userDesc')).user_id;
let invite_code = this.invite_code.split('-');
if(invite_code.length > 2 && (invite_code[1] === 'TEACHER' ||invite_code[1] === 'XXMM' )){
invite_code[1] = 'USER'
}
let code = `${invite_code[0]}-${invite_code[1]}`;
let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}`;
if(this.groupId && this.groupId !== 'null'){
URL += `&groupId=${this.groupId}`
}
this.qrcode(URL);
this.refVisible = true;
this.$nextTick(()=>{
if(!this.dataURL){
setTimeout(()=>{
let {
height,
width
} = document.getElementById('capture').getClientRects()[0]
document.getElementById('capture').style.width = width + 'px';
let o = this.getOffsetRect(this.$refs.imageWrapper);
let {
height1,
width1
} = document.getElementById('capture').getClientRects()[0];
html2canvas(document.getElementById('capture'),{
async: true,
timeout: 500,
scrollX:1,
scale: 3,
width: width1,
height: height1,
letterRendering: true,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/jpg");
this.dataURL = dataURL;
}).catch(res=>{alert(res);console.log()});
},500)
}else{
}
})
},500)
}else{
let query = {retUrl:this.$route.fullPath,is_new_user_url:'1'};
this.$router.push({name:'author',query:query})
}
},
getOffsetRect(ele){
var box=ele.getBoundingClientRect();
var body=document.body,
docElem=document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
var clientTop=docElem.clientTop||body.clientTop,
clientLeft=docElem.clientLeft||body.clientLeft;
var top=box.top+scrollTop-clientTop,
left=box.left+scrollLeft-clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top:Math.round(top),
left:Math.round(left)
}
},
qrcode(data){
if(this.QRCodeB){
this.QRCodeB.makeCode(data)
}else{
this.QRCodeB = new QRCode('qrcode', {
width: 80,
height: 80, // 高度
text: data, // 二维码内容
image: ''
}); });
wx.onMenuShareAppMessage({ }
title: that.shareTitle, // 分享标题 },
desc: that.shareDesc, // 分享描述 // 分享
link: window.location.href, // 分享链接 enableShare: function() {
imgUrl: let that = this;
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标 getwechatParam({
success: function() { api_list: 'onMenuShareAppMessage,onMenuShareTimeline',
window._hmt.push([ url:window.location.href.split('#')[0]
"_trackEvent", }).then(wechatRes => {
"分享", wx.config({
"商品页朋友圈分享", debug: false,
`id${that.shopId}` appId: wechatRes.appId,
]); //百度统计 timestamp: parseInt(wechatRes.timestamp),
}, nonceStr: wechatRes.nonceStr,
cancel: function() {} signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
}); });
wx.ready(function() { wx.ready(function() {
wx.onMenuShareTimeline({ wx.onMenuShareTimeline({
...@@ -347,225 +295,199 @@ export default { ...@@ -347,225 +295,199 @@ export default {
}; };
fileReader.readAsDataURL(xhttp.response) fileReader.readAsDataURL(xhttp.response)
}; };
fileReader.readAsDataURL(xhttp.response); xhttp.responseType = 'blob';
}; xhttp.open('GET', src, true);
xhttp.responseType = "blob"; xhttp.send()
xhttp.open("GET", src, true); },
xhttp.send(); // 初始化
}, getDetail(){
// 初始化 if(window.location.href.indexOf('invite_code')> -1){
getDetail() { this.invite_code = this.$route.query.invite_code;
if (window.location.href.indexOf("invite_code") > -1) { let l = this.invite_code.split('-').length
this.invite_code = this.$route.query.invite_code; if(l < 3){
let l = this.invite_code.split("-").length; this.invite_code_f = false
if (l < 3) {
this.invite_code_f = false;
}
}
if (window.location.href.indexOf("shopId") > -1) {
this.shopId = this.$route.query.shopId;
getGoodsDetailApi(this.shopId).then(res => {
res.desc = JSON.parse(res.desc);
res.goods_desc = JSON.parse(res.goods_desc);
res.share_desc = JSON.parse(res.share_desc);
//商品下架跳转绑定商品
if (res.status === 2 && res.bind_goods_id) {
this.$router.push({
name: "buyDetail",
query: { shopId: res.bind_goods_id }
});
this.getDetail();
return;
}
this.groupDetail = res;
for (let i = 0; i < this.groupDetail.header_url.length; i++) {
this.groupDetail.header_url[i] = this.groupDetail.header_url[
i
].replace("http://", "https://");
} }
this.groupDetail.desc.detail = this.groupDetail.desc.detail.replace( }
/http:\/\//g, if(window.location.href.indexOf('shopId')>-1){
"https://" this.shopId = this.$route.query.shopId;
); getGoodsDetailApi(this.shopId).then(res=>{
this.groupDetail.desc.qa = this.groupDetail.desc.qa.replace( res.desc = JSON.parse(res.desc);
/http:\/\//g, res.goods_desc = JSON.parse(res.goods_desc);
"https://" res.share_desc = JSON.parse(res.share_desc);
); //商品下架跳转绑定商品
if ( if(res.status === 2 && res.bind_goods_id){
this.groupDetail.share_desc.refImg && this.$router.push({name:'buyDetail',query:{shopId:res.bind_goods_id}});
this.groupDetail.share_desc.refImg.length === 1 this.getDetail();
) { return
this.groupDetail.share_desc.refImg[0].url = this.groupDetail.share_desc.refImg[0].url.replace( }
"http://", this.groupDetail = res;
"https://" for (let i = 0;i<this.groupDetail.header_url.length;i++){
); this.groupDetail.header_url[i]=this.groupDetail.header_url[i].replace('http://','https://')
let _this = this; }
this.toDataURLBase64( this.groupDetail.desc.detail = this.groupDetail.desc.detail.replace(/http:\/\//g,'https://');
this.groupDetail.share_desc.refImg[0].url, this.groupDetail.desc.qa = this.groupDetail.desc.qa.replace(/http:\/\//g,'https://');
function(avatarUrl) { if(this.groupDetail.share_desc.refImg && this.groupDetail.share_desc.refImg.length === 1){
this.groupDetail.share_desc.refImg[0].url = this.groupDetail.share_desc.refImg[0].url.replace('http://','https://');
let _this = this;
this.toDataURLBase64(this.groupDetail.share_desc.refImg[0].url, function (avatarUrl) {
_this.groupDetail.share_desc.refImg[0].url = avatarUrl; _this.groupDetail.share_desc.refImg[0].url = avatarUrl;
}
);
}
if (this.groupDetail.goods_type === 2) {
if (localStorage.getItem("cc_token")) {
getStatusWechatApi({ goods_id: this.shopId }).then(res => {
if (res.out_trade_no) {
this.$router.push({
name: "success",
query: { out_trade_no: res.out_trade_no }
});
}
}); });
} }
if (window.location.href.indexOf("groupId") > -1) {
this.groupId = this.$route.query.groupId; if(this.groupDetail.goods_type === 2){
getGroupDetailApi(this.groupId).then(res => { if(localStorage.getItem('cc_token')){
this.groupData = res; getStatusWechatApi({goods_id:this.shopId}).then(res=>{
}); if(res.out_trade_no){
this.onShare(0); this.$router.push({name:'success',query:{out_trade_no:res.out_trade_no}});
} else { }
this.onShare(1); });
}
if(window.location.href.indexOf('groupId')>-1){
this.groupId = this.$route.query.groupId;
getGroupDetailApi(this.groupId).then(res=>{
this.groupData = res
});
this.onShare(0)
}else{
this.onShare(1)
}
} }
} })
}
},
getInviteResult(){
let id=this.$route.query.shopId;
getInviteResultApi({},id).then(res=>{
this.earnings = res.earnings;
this.userNum = res.user_num;
});
},
getInviteList(){
let json = {
page: 1,
limit: 3
};
let id=this.$route.query.shopId;
getInviteListApi(json,id).then(res=>{
this.inviteList = res.list;
this.total=res.total;
}); });
} }
},
getInviteResult() {
let id = this.$route.query.shopId;
getInviteResultApi({}, id).then(res => {
this.earnings = res.earnings;
this.userNum = res.user_num;
});
},
getInviteList() {
let json = {
page: 1,
limit: 3
};
let id = this.$route.query.shopId;
getInviteListApi(json, id).then(res => {
this.inviteList = res.list;
this.total = res.total;
});
} }
} }
};
</script> </script>
<style> <style>
img, img,video{
video { max-width: 100%;
max-width: 100%; }
}
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
@red: #fc4a1b; @red: #fc4a1b;
@borderRadius: 8px; @borderRadius: 8px;
.activity { .activity {
padding-bottom: 50 * @toVh; padding-bottom: 50 * @toVh;
background-color: #ffd955; background-color: #FFd955;
img { img{
display: block; display: block;
}
}
.headerImg {
width: 100%;
} }
} .inviteContainer {
.headerImg { position: relative;
width: 100%; margin: 128 / 2 * @toVh 29 / 2 * @toVw 30 * @toVw 29 / 2 * @toVw;
} min-height: 100px;
.inviteContainer { text-align: center;
position: relative; background-color: #fff;
margin: 128 / 2 * @toVh 29 / 2 * @toVw 30 * @toVw 29 / 2 * @toVw; border-radius: @borderRadius;
min-height: 100px; padding-top: 110 / 2 * @toVw;
text-align: center; padding-bottom: 38 / 2 * @toVh;
background-color: #fff;
border-radius: @borderRadius;
padding-top: 110 / 2 * @toVw;
padding-bottom: 38 / 2 * @toVh;
}
.invite-title {
position: absolute;
width: 450 / 2 * @toVw;
left: 50%;
margin-left: -450 / 4 * @toVw;
top: -50 / 2 * @toVw;
height: auto;
}
.invite-icon {
position: absolute;
bottom: -15 * @toVw;
width: 50 * @toVw;
right: -15 * @toVw;
}
.invite-list {
margin-left: 32 / 2 * @toVw;
margin-right: 32 / 2 * @toVw;
padding: 28 / 2 * @toVh;
border: 2 * @toVw solid #f6234e;
border-radius: @borderRadius;
.i-title {
font-size: 14px;
} }
.i-num { .invite-title {
font-size: 18px; position: absolute;
width: 450 / 2 * @toVw;
left: 50%;
margin-left: -450 / 4 * @toVw;
top: -50 / 2 * @toVw;
height: auto;
}
.invite-icon{
position: absolute;
bottom: -15*@toVw;
width: 50*@toVw;
right: -15*@toVw;
} }
} .invite-list {
.flex-center { margin-left: 32 / 2 * @toVw;
display: flex; margin-right: 32 / 2 * @toVw;
flex-flow: row nowrap; padding: 28 / 2 * @toVh;
justify-content: center; border: 2*@toVw solid #f6234e;
align-items: center; border-radius: @borderRadius;
color: #888888; .i-title {
} font-size: 14px;
.flex-start { }
display: flex; .i-num {
flex-flow: row nowrap; font-size: 18px;
justify-content: flex-start; }
align-items: center; }
} .flex-center {
.red {
color: #f6234e;
}
.p-list {
margin: 0 32 / 2 * @toVw;
padding: 0;
li {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
color: #888888;
}
.flex-start {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.red{
color: #f6234e;
}
.p-list {
margin: 0 32 / 2 * @toVw;
padding: 0;
li {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 8 * @toVw;
img {
width: 74 / 2 * @toVw;
height: 74 / 2 * @toVw;
margin-right: 5px;
border-radius: 50%;
}
}
}
.no-margin {
margin: 0; margin: 0;
padding: 8 * @toVw; }
.moreBtn {
width: 220 / 2 * @toVw;
height: auto;
}
.invite-btn {
position: fixed;
bottom: 0;
width: 100%;
padding-top: 10 * @toVw;
box-sizing: content-box;
text-align: center;
background-color: #fff;
img { img {
width: 74 / 2 * @toVw; width: 504 / 2 * @toVw;
height: 74 / 2 * @toVw; height: auto;
margin-right: 5px;
border-radius: 50%;
} }
} }
} .noData {
.no-margin { width: 80%;
margin: 0; margin-top: 15px;
}
.moreBtn {
width: 220 / 2 * @toVw;
height: auto;
}
.invite-btn {
position: fixed;
bottom: 0;
width: 100%;
padding-top: 10 * @toVw;
box-sizing: content-box;
text-align: center;
background-color: #fff;
img {
width: 504 / 2 * @toVw;
height: auto;
} }
}
.noData {
width: 80%;
margin-top: 15px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment