Skip to content

shuzilixiangwaibao / wanda-vr

Go to a project
Commit 93d887f5 by 杨翰文
Options

feat: 修改分享图样式

parent 39286662
Showing with 364 additions and 4 deletions
route.html
...@@ -376,13 +376,21 @@ ...@@ -376,13 +376,21 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select:none; user-select:none;
} }
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{ .pic-modal-wrap .pic{
user-select:none; user-select:none;
width: 90%;
} }
...@@ -592,7 +600,7 @@ ...@@ -592,7 +600,7 @@
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false"> <div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<img class="pic" style="width: 100%;" :src="posterUrl" /> <div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div> </div>
......
show.html
...@@ -175,14 +175,21 @@ ...@@ -175,14 +175,21 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select:none; user-select:none;
} }
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{ .pic-modal-wrap .pic{
user-select:none; user-select:none;
width: 90%;
} }
.modal-wrap{ .modal-wrap{
...@@ -373,7 +380,7 @@ ...@@ -373,7 +380,7 @@
</div> </div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false"> <div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<img class="pic" style="width: 100%;" :src="posterUrl" /> <div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div> </div>
</div> </div>
......
test.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/helper.js"></script>
<script src="./libs/html2canvas.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
#canvasEle{
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-scrollbar{
display: none;
}
.page-wrap{
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("./images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/*padding-bottom: 1.14rem;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list{
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar{
display: none;
}
.nav-item{
display: inline-block;
width: 1.3rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child{
margin-right: 0.42rem;
}
.nav-item.active{
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox{
margin: 0.2rem auto auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.2);
position: relative;
}
.nav-item__icon{
position: absolute;
left: 50%;
top: 50%;
vertical-align: top;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
border-radius: 50px;
overflow: hidden;
}
.nav-item__mtitle{
margin-top: 0.1rem;
text-align: center;
font-size: 0.24rem;
line-height: 0.28rem;
color: #fff;
width: 1.3rem;
display: block;
white-space: normal;
}
.mtitle{
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb{
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img{
width: 6.68rem;
height: 4.46rem;
vertical-align: top;
}
.content{
width: 6.47rem;
margin: 0 auto;
flex:1;
overflow-y: scroll;
/*-webkit-overflow-scrolling: touch;*/
}
.content__text{
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
}
.bottom{
height: 1.14rem;
position: fixed;
left: 0;
bottom:0;
width: 100%;
background: none;
z-index: 999;
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon{
width: 0.63rem;
height: 0.63rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .pic{
user-select:none;
}
.modal-wrap{
background: rgba(0,0,0,.7);
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
/* transform: translate(-2000px, -2000px); */
overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrap.show {
transform: translate(0px, 0px);
}
.modal-container{
position: relative;
transform: scale(0.9);
/* height: 10.65rem; */
}
.poster, .share-pic{
width: 6.51rem;
position: relative;
}
.share-pic {
z-index: 100;
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.poster.hide {
transform: translate(-2000px, -2000px);
}
.poster-img{
width: 100%;
display: block;
}
.change-poster-btn{
position: absolute;
right: 0.32rem;
top: 0.32rem;
width: 2.08rem;
height: 0.67rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 101;
}
.poster-action-box{
width: 6.51rem;
margin: 0.4rem auto 0;
display: flex;
justify-content:center;
align-items: center;
}
.poster-action-btn{
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
/*.poster-action-btn:last-child{*/
/* margin-left: 1.17rem;*/
/*}*/
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.42rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.4rem;
bottom: 0.4rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.4rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
</style>
</head>
<body>
aaaaa
<!-- <script src="./libs/jweixin-1.6.0.js"></script> -->
<script>
html2canvas(document.body, {
}).then(canvas => {
alert(canvas)
})
</script>
</body>
</html>
travel.html
...@@ -309,13 +309,21 @@ ...@@ -309,13 +309,21 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select:none; user-select:none;
} }
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{ .pic-modal-wrap .pic{
user-select:none; user-select:none;
width: 90%;
} }
</style> </style>
...@@ -422,7 +430,7 @@ ...@@ -422,7 +430,7 @@
</div> </div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false"> <div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<img class="pic" style="width: 100%;" :src="posterUrl" /> <div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div> </div>
</div> </div>
......
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