Skip to content

html / wanda-ball

Go to a project
Commit 5cc31b25 by fengfan
Options

bug

parent d6f19d32
Showing with 170 additions and 121 deletions
src/components/Detail.vue
......@@ -23,10 +23,10 @@
<div class="num">{{pictureInfo.point_num}}</div>
</div>
</div>
<div class="shareBox" v-if="shareOnoff" @click="closeShare">
<div class="shareBox" v-if="shareOnoff" v-shotclick="closeShare" >
<!-- 点击右上角“...”进行分享 -->
<ShareImg v-if='shareOnoff' :info="pictureInfo"/>
<div class="tishi">
<div class="tishi" >
<p>长按保存海报 分享给朋友</p>
<p>集赞获大奖！！</p>
</div>
......@@ -540,10 +540,14 @@ export default {
})
// this.shareOnoff = true;
},
closeShare() {
closeShare(e) {
this.shareOnoff = false;
this.shareOnoff2 = false;
},
closeShareoff(e) {
console.log(e);
e.stopPropagation();
},
closeJinzhi() {
this.jinzhidianzan = false;
},
......@@ -849,15 +853,13 @@ export default {
top: 0;
bottom: 0;
left: 0;
right: 20px;
right: 0;
width: 100%;
overflow: auto;
background: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.7);
z-index: 100000;
text-align: right;
font-size: .4rem;
padding-top: 12px;
padding-right:20px;
color: aliceblue;
line-height: 20px;
.tishi{
......
src/components/ShareImg.vue
......@@ -19,7 +19,7 @@
</h3>
</div>
<div class="share-qrcode">
<span class="qrcode" data-qrcode="http://www.baidu.com"></span>
<span class="qrcode" :data-qrcode="'https://wanda-h5.bdideal.com/video-test/index.html#'+$route.fullPath"></span>
<p>
长按识别二维码
<br>为我点赞
......@@ -27,7 +27,7 @@
</div>
</div>
</div>
<div id="test11" class="canvas-img"></div>
<div id="test11" class="canvas-img">海报正在生成中......</div>
</div>
</template>
......@@ -41,46 +41,80 @@ export default {
},
props:['info'],
mounted() {
var _this=this
setTimeout(()=>{
window.htmlToBase64({
domSourceId: "moban1",
domTargetId: "test11"
})
},this.htmlToBase64CallBack)
},0)
},
methods: {
htmlToBase64CallBack(){
this.showMoban1 = false
},
closeShareoff(e) {
console.log(e);
e.stopPropagation();
},
}
};
</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: 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;color: black;}
.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%;color: black;}
// box-sizing: border-box;
// 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: absolute;}
.f-lh(@h){height:@h;line-height: @h;}.f-wh(@w){width:@w; height:@w;}.f-fs(@num){font-size:@num}
.canvas-html { width:10rem; .f-bc; padding:0.5rem; background: #fff; .f-pf; left:0px; top:0px;
.share-title {.f-fs(0.56rem);font-weight:600;line-height: .7rem; margin-bottom: 0.25rem;color: black;text-align: left;}
.share-pic {width:9rem;float: left;height:auto; margin-bottom: 0.2rem;}
.share-subtitle {.f-fs(0.38rem); .f-fwn; .f-fl; padding:0.2rem 0; width:50%;color: black;text-align: left;}
.share-author { .f-lh(0.7rem); .f-fr;
span {.f-wh(0.7rem); border-radius: 50%; .f-dib; overflow: hidden; vertical-align: middle;
img {.f-wh(100%);}
}
b {.f-dib; .f-lh(0.7rem);vertical-align: middle; .f-fs(0.32rem); margin-left: 0.1rem; .f-fwn;color: black;}
b {.f-dib; .f-lh(0.7rem);vertical-align: middle; .f-fs(0.38rem); margin-left: 0.1rem; .f-fwn;color: black;}
}
.share-qrcode { margin-top: 0.3rem;
img {.f-wh(1.04rem); .f-fr;}
p{color:#999; margin-right: 0.1rem; .f-fr; .f-tar; .f-fs(0.28rem); margin-top: 0.1rem;line-height: 0.4rem;}
.share-qrcode { margin-top: 0.2rem;
img {.f-wh(1.2rem); .f-fr;}
p{color:#999; margin-right: 0.1rem; .f-fr; .f-tar; .f-fs(0.28rem); margin-top: 0.2rem;line-height: 0.4rem;}
}
}
.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%;}
.canvas-img img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
display: block;
}
.canvas-img {.f-pf; left:60px; top:60px; right:60px; bottom:300px; background: none;min-height: 500px; overflow: auto;
text-align: center;
line-height: 5rem;
color: #fff;
font-size: .4rem;
}
.moban1box{
position: relative;
width: 80%;
position: absolute;
width: 10rem;
height: 350px;
overflow: hidden;
top:60px;
left:60px
top:0;
opacity: 0;
left:0;
}
</style>
\ No newline at end of file
src/pages/index/index.html
......@@ -5,14 +5,14 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>与世童行·直通世界杯篮球嘉年华</title>
<link rel="stylesheet" href="https://wanda-h5.bdideal.com/video-test/style.css?asdasd">
<link rel="stylesheet" href="https://wanda-h5.bdideal.com/video-test/style.css?asd123asd">
<script type="text/javascript" src="https://js.tarsocial.com/h5stat-2.1.1.vue.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdn.bootcss.com/qrcode-generator/1.4.3/qrcode.min.js"></script>
<script src="https://wanda-h5.bdideal.com/video-test/shareImg.js?asdasd"></script>
<script src="https://wanda-h5.bdideal.com/video-test/shareImg.js?ds141adsaa123"></script>
</head>
<body>
......
src/pages/index/index.js
......@@ -2,7 +2,18 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// import Vue from "vue/dist/vue.common.js";
Vue.directive('shotclick', {
inserted: function(el, binding) {
el.onmousedown = function() {
var timeNow = new Date().getTime()
document.onmouseup = function(e) {
if (new Date().getTime() - timeNow < 500) {
binding.value(e)
}
}
}
}
})
import App from './App'
import router from './router'
......@@ -41,7 +52,7 @@ window.$eventbus = new Vue();
import store from '../../modules/store';
import {
Actionsheet
Actionsheet
} from 'mint-ui';
Vue.component(Actionsheet.name, Actionsheet);
......@@ -49,111 +60,111 @@ Vue.component(Actionsheet.name, Actionsheet);
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5d0e793ed747d3c25a756211a97f992d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5d0e793ed747d3c25a756211a97f992d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
router.beforeEach((to, from, next) => {
function getQuery (key) {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
function getQuery(key) {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
}
}
if (key) {
return theRequest[key];
} else {
return theRequest;
}
}
const list = ['/', '/detail', '/imgup'] // 将需要切换效果的路由名称组成一个数组
const toName = to.path // 即将进入的路由名字
const fromName = from.path // 即将离开的路由名字
const toIndex = list.indexOf(toName) // 进入下标
const fromIndex = list.indexOf(fromName) // 离开下标
let direction = ''
if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在
if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标，那么是左滑
direction = 'left'
} else {
direction = 'right' // 如果进入的下标大于离开的下标，那么是右滑
}
}
if (key) {
return theRequest[key];
} else {
return theRequest;
store.state.viewDirection = direction //这里使用vuex进行赋值
if (_hmt) {
if (to.path) {
_hmt.push(['_trackPageview', '/#' + to.fullPath]);
}
}
}
const list = ['/', '/detail', '/imgup'] // 将需要切换效果的路由名称组成一个数组
const toName = to.path // 即将进入的路由名字
const fromName = from.path // 即将离开的路由名字
const toIndex = list.indexOf(toName) // 进入下标
const fromIndex = list.indexOf(fromName) // 离开下标
let direction = ''
if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在
if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标，那么是左滑
direction = 'left'
if (getQuery('type')) {
store.commit('setType', getQuery('type'))
}
if (getQuery('code') && !store.state.token) {
store.dispatch('getToken', getQuery('code')).then(res => {
next()
})
} else if (getQuery('token')) {
store.commit('setToken', getQuery('token'))
next()
} else {
direction = 'right' // 如果进入的下标大于离开的下标，那么是右滑
next()
}
}
store.state.viewDirection = direction //这里使用vuex进行赋值
// return next()
})
if (_hmt) {
if (to.path) {
_hmt.push(['_trackPageview', '/#' + to.fullPath]);
Vue.prototype.$randomText = function() {
function RandomNumBoth(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range);
return num;
}
}
if(getQuery('type')) {
store.commit('setType', getQuery('type'))
}
if(getQuery('code') && !store.state.token) {
store.dispatch('getToken', getQuery('code')).then(res => {
next()
})
} else if (getQuery('token')) {
store.commit('setToken', getQuery('token'))
next()
} else {
next()
}
// return next()
})
var num = RandomNumBoth(1, 11);
var str = null;
switch (num) {
case 2:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 3:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 7:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 10:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 11:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
default:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
}
Vue.prototype.$randomText = function () {
function RandomNumBoth(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range);
return num;
}
var num = RandomNumBoth(1, 11);
var str = null;
switch (num) {
case 2:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 3:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 7:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 10:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 11:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
default:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
}
return str;
return str;
}
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
\ 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