Skip to content

html / wanda-ball

Go to a project
Commit c4a90bb5 by guanxiangjie
Options

123

parent e0376309
Showing with 73 additions and 46 deletions
src/components/Detail.vue
......@@ -23,8 +23,12 @@
<div class="num">{{pictureInfo.point_num}}</div>
</div>
</div>
<div class="shareBox" v-show="shareOnoff" @click="closeShare">
<!-- <ShareImg v-if='shareOnoff'/> -->
<div class="shareBox" v-if="shareOnoff" @click="closeShare">
<ShareImg v-if='shareOnoff' :info="pictureInfo"/>
<div class="tishi">
<p>长按保存海报 分享给朋友</p>
<p>集赞获大奖！！</p>
</div>
</div>
<div class="shareBox shareBox2" ref="mybox" v-show="shareOnoff2" @click="closeShare">
<img :src="shareCode" class="share-img" alt="" >
......@@ -849,6 +853,29 @@ export default {
overflow: auto;
background: rgba(0, 0, 0, 0.8);
z-index: 100000;
.tishi{
position: absolute;
border: 4px dotted white ;
width:400px;
height: 200px;
opacity: 1;
left:60px;
bottom: 50px;
border-top-left-radius: 1.4rem;
border-bottom-right-radius: 1.4rem;
padding:20px;
padding-right:10px;
line-height: 200px;
p{
font-size: .377rem;
text-align: center;
font-weight:900;
color:white;
}
}
.share-img {
width: 500px;
margin: 0 auto;
......
src/components/ShareImg.vue
<template>
<div>
<div id="moban1" class="canvas-html">
<h1 class="share-title">最美丹寨笑脸摄影大赛</h1>
<img
class="share-pic"
src="https://wanda-h5.bdideal.com/video-test/static/bottom.png"
>
<div class="f-cb">
<h2 class="share-subtitle">《甜蜜的微笑》</h2>
<h3 class="share-author">
<span>
<img
src="https://wanda-h5.bdideal.com/video-test/static/bottom.png"
>
</span>
<b>自由的小熊</b>
</h3>
<div class="moban1box">
<div id="moban1" class="canvas-html" v-show="showMoban1">
<h2 class="share-title">与世童行·直通世界杯篮球嘉年华</h2>
<img
class="share-pic"
:src="info.image"
>
<div class="f-cb">
<h2 class="share-subtitle">《{{info.title}}》</h2>
<h3 class="share-author">
<span>
<img
:src="info.avatar"
>
</span>
<b>{{info.nickname}}</b>
</h3>
</div>
<div class="share-qrcode">
<span class="qrcode" data-qrcode="http://www.baidu.com"></span>
<p>
长按识别二维码
<br>为我点赞
</p>
</div>
</div>
<div class="share-qrcode">
<span class="qrcode" data-qrcode="http://www.baidu.com"></span>
<p>
长按识别二维码
<br>为我点赞
</p>
</div>
</div>
<div id="test11" class="canvas-img"></div>
</div>
</template>
......@@ -32,6 +34,12 @@
<script>
export default {
data(){
return{
showMoban1:true
}
},
props:['info'],
mounted() {
setTimeout(()=>{
window.htmlToBase64({
......@@ -41,29 +49,15 @@ export default {
},0)
},
methods: {
// qrcode() {
// let qrcode = new QRCode("qrcode", {
// width: 132,
// height: 132,
// text: "https://www.baidu.com", // 二维码地址
// colorDark: "#000",
// colorLight: "#fff"
// });
// }
// cc(){
// window.htmlToBase64({
// domSourceId: "moban1",
// domTargetId: "test1"
// })
// }
}
};
</script>
<style lang="less" scoped>
// out: ../css/style.css, compress: true, sourceMap: true
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:'.';}.f-cb,.f-cbli li{zoom:1;}.f-ib{display:inline-block;*display:inline;*zoom:1;}.f-dn{display:none;}.f-db{display:block;}.f-fl{float:left;}.f-fr{float:right;}.f-pr{position:relative;}.f-prz{position:relative;zoom:1;}.f-oh{overflow:hidden;}.f-ff0{font-family:arial;}.f-ff1{font-family:"Microsoft YaHei",arial;}.f-fs1{font-size:12px;}.f-fs2{font-size:14px;}.f-fwn{font-weight:normal;}.f-fwb{font-weight:bold;}.f-tal{text-align:left;}.f-tac{text-align:center;}.f-tar{text-align:right;}.f-taj{text-align:justify;text-justify:inter-ideograph;}.f-vam,.f-vama *{vertical-align:middle;}.f-wsn{word-wrap:normal;white-space:nowrap;}.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}.f-ti{overflow:hidden;text-indent:-30000px;}.f-ti2{text-indent:2em;}.f-lhn{line-height:normal;}.f-tdu,.f-tdu:hover{text-decoration:underline;}.f-tdn,.f-tdn:hover{text-decoration:none;}.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}.f-csp{cursor:pointer;}.f-csd{cursor:default;}.f-csh{cursor:help;}.f-csm{cursor:move;}.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.f-bc{margin-left: auto; margin-right: auto;}.f-db{display:block;}.f-dib{display:inline-block;}.f-dn{display:none;}.f-pr{position: relative;}.f-pa{position: absolute}.f-pf{position: fixed;}.f-lh(@h){height:@h;line-height: @h;}.f-wh(@w){width:@w; height:@w;}.f-fs(@num){font-size:@num}
.canvas-html { width:7.5rem; .f-bc; padding:0.35rem; box-sizing: border-box; background: #fff; .f-pf; left:0; top:0;
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:'.';}.f-cb,.f-cbli li{zoom:1;}.f-ib{display:inline-block;*display:inline;*zoom:1;}.f-dn{display:none;}.f-db{display:block;}.f-fl{float:left;}.f-fr{float:right;}.f-pr{position:relative;}.f-prz{position:relative;zoom:1;}.f-oh{overflow:hidden;}.f-ff0{font-family:arial;}.f-ff1{font-family:"Microsoft YaHei",arial;}.f-fs1{font-size:12px;}.f-fs2{font-size:14px;}.f-fwn{font-weight:normal;}.f-fwb{font-weight:bold;}.f-tal{text-align:left;}.f-tac{text-align:center;}.f-tar{text-align:right;}.f-taj{text-align:justify;text-justify:inter-ideograph;}.f-vam,.f-vama *{vertical-align:middle;}.f-wsn{word-wrap:normal;white-space:nowrap;}.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}.f-ti{overflow:hidden;text-indent:-30000px;}.f-ti2{text-indent:2em;}.f-lhn{line-height:normal;}.f-tdu,.f-tdu:hover{text-decoration:underline;}.f-tdn,.f-tdn:hover{text-decoration:none;}.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}.f-csp{cursor:pointer;}.f-csd{cursor:default;}.f-csh{cursor:help;}.f-csm{cursor:move;}.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.f-bc{margin-left: auto; margin-right: auto;}.f-db{display:block;}.f-dib{display:inline-block;}.f-dn{display:none;}.f-pr{position: relative;}.f-pa{position: absolute}.f-pf{position: absolute;}.f-lh(@h){height:@h;line-height: @h;}.f-wh(@w){width:@w; height:@w;}.f-fs(@num){font-size:@num}
.canvas-html { position: absolute; width:7.5rem; .f-bc; padding:0.35rem; box-sizing: border-box; background: #fff; .f-pf; left:0px; top:0px;
.share-title {.f-fs(0.44rem);.f-fwn; margin-bottom: 0.25rem;}
.share-pic {width:6.8rem;height:auto; margin-bottom: 0.2rem;}
.share-subtitle {.f-fs(0.36rem); .f-fwn; .f-fl; padding:0.1rem 0; width:50%;}
......@@ -78,8 +72,15 @@ export default {
p{color:#999; margin-right: 0.1rem; .f-fr; .f-tar; .f-fs(0.28rem); margin-top: 0.1rem;}
}
}
.canvas-img {.f-pf; left:0; top:0; right:0; bottom:0; background: #fff; overflow: auto;
img {.f-bc; .f-db; width:100%; height:auto;}
.canvas-img {.f-pf; left:60px; top:60px; right:60px; bottom:300px; background: #fff;min-height: 500px; overflow: auto;
img {.f-bc; .f-db; width:100%; height:100%;}
}
.moban1box{
position: relative;
width: 80%;
height: 350px;
overflow: hidden;
top:60px;
left:60px
}
</style>
\ No newline at end of file
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 sign in to comment