Skip to content

N
newLive
Commit 834c050c authored by mengqr's avatar mengqr
Browse files
Options

修改直播卡片问题

parent 3ffebbdf
Show whitespace changes
Inline Side-by-side
Showing with 1230 additions and 13921 deletions
package-lock.json
View file @ 834c050c
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 834c050c
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"@liveqing/liveplayer": "^2.7.0", "@liveqing/liveplayer": "^2.7.0",
"axios": "^1.1.3", "axios": "^1.1.3",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"html2canvas": "^1.4.1",
"jquery": "^3.6.1", "jquery": "^3.6.1",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"mint-ui": "^2.2.13", "mint-ui": "^2.2.13",
......
src/axios/request.js
View file @ 834c050c
...@@ -9,9 +9,9 @@ const appName = "test5" ...@@ -9,9 +9,9 @@ const appName = "test5"
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
// 接口路径 // 接口路径
const BASEURL_TEST = 'https://api.douniu8.com' const BASEURL_TEST = 'https://test6.douniu8.com'
// const BASEURL_TEST = 'http://39.105.193.58:8081' // const BASEURL_TEST = 'http://39.105.193.58:8081'
const BASEURL_PROD = 'https://api.douniu8.com' const BASEURL_PROD = 'https://test6.douniu8.com'
const CONTRACT_TEST = 'http://47.95.140.89:9090' const CONTRACT_TEST = 'http://47.95.140.89:9090'
const CONTRACT_PROD = 'http://ht.douniu8.com:9090' const CONTRACT_PROD = 'http://ht.douniu8.com:9090'
const baseURL = IS_PROD ? BASEURL_PROD : BASEURL_TEST; const baseURL = IS_PROD ? BASEURL_PROD : BASEURL_TEST;
......
src/components/plugin/shareCard.vue
View file @ 834c050c
<template> <template>
<div class="body"> <div class="body">
<img class="share-img" @click="clickShare()" src="../../common/img/share.png" alt=""> <img class="share-img" @click="clickShare()" src="../../common/img/share.png" alt="">
<div v-if="ifShow"> <img v-if="ifPhoto" :src="photoImg" class="photo-img" alt="">
<div v-if="ifShow" class="myImagePass" id="myImage">
<div >
<img v-if="checkType==0" class="style-one" src="../../common/img/card-style-One.png" alt=""> <img v-if="checkType==0" class="style-one" src="../../common/img/card-style-One.png" alt="">
<img v-if="checkType==1" class="style-one" src="../../common/img/card-style-Two.png" alt=""> <img v-if="checkType==1" class="style-one" src="../../common/img/card-style-Two.png" alt="">
<img v-if="checkType==2" class="style-one" src="../../common/img/card-style-Three.png" alt=""> <img v-if="checkType==2" class="style-one" src="../../common/img/card-style-Three.png" alt="">
<img class="pressShare" src="../../common/img/pressShare.png" alt="">
<img class="shareTips" v-if="ifTips" @click="clickTips()" src="../../common/img/shareTips.png" alt="">
<!-- 信息样式 --> <!-- 信息样式 -->
<div v-if="checkType==0"> <div v-if="checkType==0">
<img class="headImg" :src="headPro" alt=""> <img class="headImg" :src="headPro" alt="">
...@@ -47,6 +50,13 @@ ...@@ -47,6 +50,13 @@
:logoScale="0.2"> :logoScale="0.2">
</vue-qr> </vue-qr>
</div> </div>
</div>
</div>
<div v-if="ifShow">
<img class="pressShare" src="../../common/img/pressShare.png" alt="">
<img class="shareTips" v-if="ifTips" @click="clickTips()" src="../../common/img/shareTips.png" alt="">
<div class="bottom-countent"> <div class="bottom-countent">
<div @click="checkImg(0)" :class="{smallOneRed:checkType==0,smallOne:checkType!=0}"> <div @click="checkImg(0)" :class="{smallOneRed:checkType==0,smallOne:checkType!=0}">
<img class="small-img" src="../../common/img/thumbnail-One.png" alt=""> <img class="small-img" src="../../common/img/thumbnail-One.png" alt="">
...@@ -81,6 +91,7 @@ ...@@ -81,6 +91,7 @@
<script> <script>
import VueQr from 'vue-qr' import VueQr from 'vue-qr'
import html2canvas from "html2canvas";
export default { export default {
name: 'shareCard', name: 'shareCard',
components:{ components:{
...@@ -98,8 +109,9 @@ export default { ...@@ -98,8 +109,9 @@ export default {
checkType:0, checkType:0,
copyContent:window.location.href,//需要复制的内容 copyContent:window.location.href,//需要复制的内容
ifShow:false, ifShow:false,
ifPhoto:false,//显示拍照图片
imgUrl: 'https://baidu.com',//二维码地址 imgUrl: 'https://baidu.com',//二维码地址
photoImg:'',//拍照图片
headPro:'',//头像图片 headPro:'',//头像图片
udName:'',//主播名称 udName:'',//主播名称
lvrImg:'',//占位图 lvrImg:'',//占位图
...@@ -110,7 +122,7 @@ export default { ...@@ -110,7 +122,7 @@ export default {
created() { created() {
this.liveList()
// this.getMessage() // this.getMessage()
}, },
...@@ -118,6 +130,11 @@ export default { ...@@ -118,6 +130,11 @@ export default {
methods: { methods: {
checkImg(e){ checkImg(e){
this.checkType=e this.checkType=e
this.ifPhoto=false
//延时拍照
setTimeout(() => {
this.saveImage()
}, 1000);
}, },
onCopy({value}){ onCopy({value}){
// console.log('success',value); // console.log('success',value);
...@@ -126,6 +143,125 @@ export default { ...@@ -126,6 +143,125 @@ export default {
console.log('复制成功') console.log('复制成功')
}, },
//直播详情
liveList(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.liveDetail(temp).then(res=>{
let photo=res.data.data.udPhotoFileid
let boxImg=res.data.data.lvrImgLargeUrl
// this.headPro=res.data.data.udPhotoFileid//头像图片
this.udName=res.data.data.udNickname//主播名称
// this.lvrImg=res.data.data.lvrImgLargeUrl//占位图
this.liveName=res.data.data.lvrName//房间名称
this.imgUrl=window.location.href//二维码地址
this.urlTobase64(photo)
this.urlTobaseTwo64(boxImg)
})
},
//截取图片
saveImage() {
// let aaa=this.urlTobase64(this.coverImg)
// console.log("的撒发生",aaa) // 最终拿到的base64值
let aca=document.querySelector("#myImage")
console.log('萨芬',aca)
html2canvas(document.querySelector("#myImage"),{
useCORS: true, //这个为true代表允许跨域
allowTaint: false,
logging: false,
letterRendering: true,
// width:window.screen.availWidth,
// height:window.screen.availHeight,
// windowWidth:document.body.scrollWidth,
// windowHeight:document.body.scrollHeight,
// x:0,
// y:window.pageYOffset
}).then((canvas) => {
// var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log("案说法",canvas.toDataURL())
this.photoImg=canvas.toDataURL()
if(this.photoImg){
this.ifPhoto=true
}else{
this.ifPhoto=false
}
// var link = document.getElementById("link");
// link.setAttribute("download", "海报.png");
// link.setAttribute("href", canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
// link.click();
})
},
//转换图片
urlTobase64(url) {
var that = this
var img = new Image()
img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾，处理缓存
//支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理，加上这行会无法显示图片，导致拿不到base64)
img.setAttribute('crossOrigin', '*')
if (url) {
img.onload = function() {
var base64Url = that.getBase64Image(img)
console.log("的撒发生",base64Url) // 最终拿到的base64值
that.headPro=base64Url
}
}
},
//转换图片
urlTobaseTwo64(url) {
var that = this
var img = new Image()
img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾，处理缓存
//支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理，加上这行会无法显示图片，导致拿不到base64)
img.setAttribute('crossOrigin', '*')
if (url) {
img.onload = function() {
var base64Url = that.getBase64ImageTwo(img)
that.lvrImg=base64Url
console.log("的撒发生",base64Url) // 最终拿到的base64值
}
}
},
//转换图片
getBase64Image(img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀，动态变换如 image/png
return dataURL
},
//转换图片
getBase64ImageTwo(img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀，动态变换如 image/png
return dataURL
},
onError({value}){ onError({value}){
// console.log('error',value) // console.log('error',value)
// console.log('复制成功') // console.log('复制成功')
...@@ -147,11 +283,21 @@ this.ifTips=false ...@@ -147,11 +283,21 @@ this.ifTips=false
}, },
//点击分享按钮 //点击分享按钮
clickShare(){ clickShare(){
if(this.ifShow==false){ if(this.ifShow==false){
this.ifShow=true this.ifShow=true
//延时拍照
setTimeout(() => {
this.saveImage()
}, 1000);
}else{ }else{
this.ifShow=false this.ifShow=false
this.ifPhoto=false
} }
console.log("头像信息",this.headPortrait) console.log("头像信息",this.headPortrait)
console.log("主播名称",this.udNickname) console.log("主播名称",this.udNickname)
console.log("直播名称",this.lvrName) console.log("直播名称",this.lvrName)
...@@ -160,11 +306,7 @@ clickShare(){ ...@@ -160,11 +306,7 @@ clickShare(){
// udName:'',//主播名称 // udName:'',//主播名称
// lvrImg:'',//占位图 // lvrImg:'',//占位图
// liveName:'',//房间名称 // liveName:'',//房间名称
this.headPro=this.headPortrait//头像图片
this.udName=this.udNickname//主播名称
this.lvrImg=this.lvrImgLargeUrl//占位图
this.liveName=this.lvrName//房间名称
this.imgUrl=window.location.href//二维码地址
} }
}, },
}; };
...@@ -177,9 +319,27 @@ this.imgUrl=window.location.href//二维码地址 ...@@ -177,9 +319,27 @@ this.imgUrl=window.location.href//二维码地址
.style-one{ .style-one{
height: 145vw; height: 145vw;
position: absolute; position: absolute;
top: 10vw; top: 0;
z-index: 99; z-index: 99;
left:0;
width: 85vw;
}
.myImagePass{
position: absolute;
top: 10vw;
left: 7.5vw; left: 7.5vw;
/* background: greenyellow; */
z-index: -1;
height: 145vw;
width: 85vw;
}
.photo-img{
position: absolute;
top: 10vw;
left: 7.5vw;
/* background: greenyellow; */
z-index: 130;
height: 145vw;
width: 85vw; width: 85vw;
} }
.bottom-countent{ .bottom-countent{
...@@ -306,89 +466,89 @@ font-size: 4vw; ...@@ -306,89 +466,89 @@ font-size: 4vw;
height: 19vw; height: 19vw;
width: 19vw; width: 19vw;
position: absolute; position: absolute;
top: 20vw; top: 10vw;
z-index: 100; z-index: 100;
left: 22vw; left: 14vw;
border-radius: 50%; border-radius: 50%;
} }
.headImgTwo{ .headImgTwo{
height: 19vw; height: 19vw;
width: 19vw; width: 19vw;
position: absolute; position: absolute;
top: 20vw; top: 10vw;
z-index: 100; z-index: 100;
left: 22vw; left: 14.5vw;
border-radius: 50%; border-radius: 50%;
} }
.headImgThree{ .headImgThree{
height: 19vw; height: 19vw;
width: 19vw; width: 19vw;
position: absolute; position: absolute;
top: 20vw; top: 10vw;
z-index: 100; z-index: 100;
left: 40.5vw; left: 32.5vw;
border-radius: 50%; border-radius: 50%;
} }
.udStyle{ .udStyle{
font-size: 5vw; font-size: 5vw;
color: white; color: white;
position: absolute; position: absolute;
top: 41vw; top: 31vw;
z-index: 100; z-index: 100;
left: 22vw; left: 14vw;
} }
.lvrImg{ .lvrImg{
height: 39vw; height: 39vw;
width: 73vw; width: 73vw;
position: absolute; position: absolute;
top: 62vw; top: 52vw;
border-radius: 1vw; border-radius: 1vw;
left: 13.5vw; left: 6vw;
z-index: 100; z-index: 100;
} }
.lvrImgTwo{ .lvrImgTwo{
height: 39vw; height: 39vw;
width: 71vw; width: 71vw;
position: absolute; position: absolute;
top: 62vw; top: 52vw;
border-radius: 1vw; border-radius: 1vw;
left: 14.5vw; left: 6.8vw;
z-index: 100; z-index: 100;
} }
.lvrImgThree{ .lvrImgThree{
height: 32vw; height: 32vw;
width: 58vw; width: 58vw;
position: absolute; position: absolute;
top: 68vw; top: 58vw;
border-radius: 1vw; border-radius: 1vw;
left: 20.5vw; left: 12.9vw;
z-index: 100; z-index: 100;
} }
.lvrName{ .lvrName{
font-size: 4vw; font-size: 4vw;
width: 68vw; width: 68vw;
position: absolute; position: absolute;
top: 102vw; top: 92vw;
z-index: 100; z-index: 100;
left: 15vw; left: 8vw;
} }
.lvrNameTwo{ .lvrNameTwo{
font-size: 3.8vw; font-size: 3.8vw;
width: 66vw; width: 66vw;
position: absolute; position: absolute;
top: 102vw; top: 92vw;
color: white; color: white;
z-index: 100; z-index: 100;
left: 16vw; left: 9vw;
} }
.lvrNameThree{ .lvrNameThree{
font-size: 3.8vw; font-size: 3.8vw;
position: absolute; position: absolute;
top: 100vw; top: 91vw;
width: 56vw; width: 56vw;
color: white; color: white;
z-index: 100; z-index: 100;
left: 21vw; left: 15vw;
} }
.pressShare{ .pressShare{
height: 5vw; height: 5vw;
...@@ -399,24 +559,24 @@ font-size: 4vw; ...@@ -399,24 +559,24 @@ font-size: 4vw;
} }
.qrCode{ .qrCode{
position: absolute; position: absolute;
top: 120vw; top: 110vw;
left: 58vw; left: 51vw;
height: 22vw; height: 22vw;
width: 22vw; width: 22vw;
z-index: 100; z-index: 100;
} }
.qrCodeTwo{ .qrCodeTwo{
position: absolute; position: absolute;
top: 124vw; top: 114vw;
left: 60.5vw; left: 53.5vw;
height: 22vw; height: 22vw;
width: 22vw; width: 22vw;
z-index: 100; z-index: 100;
} }
.qrCodeThree{ .qrCodeThree{
position: absolute; position: absolute;
top: 124vw; top: 114vw;
left: 17vw; left: 9vw;
height: 22vw; height: 22vw;
width: 22vw; width: 22vw;
z-index: 100; z-index: 100;
......
src/router/index.js
View file @ 834c050c
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import store from '../store/index' import store from '../store/index'
import test from '../views/test.vue'
import sign from '../views/sign' import sign from '../views/sign'
import password from '../views/password' import password from '../views/password'
import register from '../views/register' import register from '../views/register'
...@@ -54,7 +55,12 @@ const router = new Router({ ...@@ -54,7 +55,12 @@ const router = new Router({
component:sign, component:sign,
// 判断是否需要登录 // 判断是否需要登录
}, },
{
path: '/test',
name: 'test',
component:test,
// 判断是否需要登录
},
{ {
path: '/password', path: '/password',
name: 'password', name: 'password',
......
src/views/fullScreen.vue
View file @ 834c050c
...@@ -651,7 +651,7 @@ this.pten = false ...@@ -651,7 +651,7 @@ this.pten = false
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=true this.ifFollow=true
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
...@@ -676,8 +676,8 @@ this.pten = false ...@@ -676,8 +676,8 @@ this.pten = false
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=true this.ifFollow=false
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
} }
...@@ -1087,11 +1087,11 @@ let temp=this.qs.stringify({ ...@@ -1087,11 +1087,11 @@ let temp=this.qs.stringify({
} }
.home-number{ .home-number{
font-size: 1vw; font-size: 1vw;
transform: scale(0.7); transform: scale(0.75);
position: absolute; position: absolute;
top: 6vw; top: 6vw;
left: 18vw; left: 18.5vw;
z-index:99; z-index: 99;
color: white; color: white;
} }
.follow-img{ .follow-img{
......
src/views/live.vue
View file @ 834c050c
...@@ -512,7 +512,7 @@ export default { ...@@ -512,7 +512,7 @@ export default {
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=true this.ifFollow=true
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
...@@ -538,7 +538,7 @@ export default { ...@@ -538,7 +538,7 @@ export default {
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=false this.ifFollow=false
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
...@@ -1150,10 +1150,10 @@ this.pten = false ...@@ -1150,10 +1150,10 @@ this.pten = false
} }
.home-number{ .home-number{
font-size: 1vw; font-size: 1vw;
transform: scale(0.7); transform: scale(0.75);
position: absolute; position: absolute;
top: 63vw; top: 63vw;
left: 60vw; left: 59.5vw;
z-index: 89; z-index: 89;
color: white; color: white;
} }
......
src/views/liveList.vue
View file @ 834c050c
...@@ -57,6 +57,7 @@ export default { ...@@ -57,6 +57,7 @@ export default {
created(){ created(){
this.getState() this.getState()
}, },
mounted() { mounted() {
this.getRecommendList() this.getRecommendList()
this.getList() this.getList()
...@@ -135,6 +136,7 @@ export default { ...@@ -135,6 +136,7 @@ export default {
}) })
}, },
getState(){ getState(){
let token=sessionStorage.getItem("token") let token=sessionStorage.getItem("token")
let img=sessionStorage.getItem("udPhotoFileid") let img=sessionStorage.getItem("udPhotoFileid")
console.log("就阿婆啊v发",token) console.log("就阿婆啊v发",token)
...@@ -144,6 +146,7 @@ export default { ...@@ -144,6 +146,7 @@ export default {
this.userImg=img this.userImg=img
}else{ }else{
this.ifLog=1 this.ifLog=1
} }
}else{ }else{
...@@ -196,8 +199,8 @@ export default { ...@@ -196,8 +199,8 @@ export default {
this.server.live.tourist(temp).then(res=>{ this.server.live.tourist(temp).then(res=>{
let thisToken= res.data.data.token let thisToken= res.data.data.token
window.sessionStorage.setItem('token', thisToken);//token window.sessionStorage.setItem('token', thisToken);//token
this.$router.go(0) // this.$router.go(0)
window.location.reload();
}) })
}, },
mine(){ mine(){
......
src/views/sign.vue
View file @ 834c050c
...@@ -4,23 +4,94 @@ ...@@ -4,23 +4,94 @@
</div> --> </div> -->
<div > <div>
<span class="title">短信验证</span> <span class="title">短信验证</span>
<span class="registerOne">短信已发送至：</span> <span class="registerOne">短信已发送至：</span>
<span class="registerPhone">+86 {{userPhone}}</span> <span class="registerPhone">+86 {{ userPhone }}</span>
<span class="registerTwo">手机验证码</span> <span class="registerTwo">手机验证码</span>
<input type="number" id="firstNumber" @input="changeInput(0)" @blur="searchChangeTwo(0)" @focus="searchChange(0)" v-model="numberOne" oninput="if(value.length>1)value=value.slice(0,6)" :class="{wbk11:!ifRed0,wbkRed:ifRed0}"> <input
<input type="number" id="secondNumber" @input="changeInput(1)" @blur="searchChangeTwo(1)" style="left:20vw" @focus="searchChange(1)" v-model="numberTwo" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed1,wbkRed:ifRed1}"> type="number"
<input type="number" id="threeNumber" @input="changeInput(2)" @blur="searchChangeTwo(2)" style="left:35vw" @focus="searchChange(2)" v-model="numberThree" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed2,wbkRed:ifRed2}"> id="firstNumber"
<input type="number" id="fourNumber" @input="changeInput(3)" @blur="searchChangeTwo(3)" style="left:50vw" @focus="searchChange(3)" v-model="numberFour" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed3,wbkRed:ifRed3}"> @input="changeInput(0)"
<input type="number" id="fiveNumber" @input="changeInput(4)" @blur="searchChangeTwo(4)" style="left:65vw" @focus="searchChange(4)" v-model="numberFive" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed4,wbkRed:ifRed4}"> @blur="searchChangeTwo(0)"
<input type="number" id="sixNumber" @input="changeInput(5)" @blur="searchChangeTwo(5)" style="left:80vw" @focus="searchChange(5)" v-model="numberSix" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed5,wbkRed:ifRed5}"> @focus="searchChange(0)"
v-model="numberOne"
<img class="default-img" v-if="ifClick==false" src="../common/img/default-img.png" alt=""> oninput="if(value.length>1)value=value.slice(0,6)"
<img class="default-img" v-if="ifClick==true" @click="goTo()" src="../common/img/new-send.png" alt=""> :class="{ wbk11: !ifRed0, wbkRed: ifRed0 }"
<span v-show="ifSend" class="send" @click="sendButton()" >重新发送</span> />
<span v-show="!ifSend" class="sendTwo" id="sendBtn">{{count}}S重新发送</span> <input
type="number"
id="secondNumber"
@input="changeInput(1)"
@blur="searchChangeTwo(1)"
style="left: 20vw"
@focus="searchChange(1)"
v-model="numberTwo"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed1, wbkRed: ifRed1 }"
/>
<input
type="number"
id="threeNumber"
@input="changeInput(2)"
@blur="searchChangeTwo(2)"
style="left: 35vw"
@focus="searchChange(2)"
v-model="numberThree"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed2, wbkRed: ifRed2 }"
/>
<input
type="number"
id="fourNumber"
@input="changeInput(3)"
@blur="searchChangeTwo(3)"
style="left: 50vw"
@focus="searchChange(3)"
v-model="numberFour"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed3, wbkRed: ifRed3 }"
/>
<input
type="number"
id="fiveNumber"
@input="changeInput(4)"
@blur="searchChangeTwo(4)"
style="left: 65vw"
@focus="searchChange(4)"
v-model="numberFive"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed4, wbkRed: ifRed4 }"
/>
<input
type="number"
id="sixNumber"
@input="changeInput(5)"
@blur="searchChangeTwo(5)"
style="left: 80vw"
@focus="searchChange(5)"
v-model="numberSix"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed5, wbkRed: ifRed5 }"
/>
<img
class="default-img"
v-if="ifClick == false"
src="../common/img/default-img.png"
alt=""
/>
<img
class="default-img"
v-if="ifClick == true"
@click="goTo()"
src="../common/img/new-send.png"
alt=""
/>
<span v-show="ifSend" class="send" @click="sendButton()">重新发送</span>
<span v-show="!ifSend" class="sendTwo" id="sendBtn"
>{{ count }}S重新发送</span
>
<!-- <span class="title">验证码登录</span> <!-- <span class="title">验证码登录</span>
<input type="number" v-model="userPhone" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" class="wbk1"> <input type="number" v-model="userPhone" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" class="wbk1">
...@@ -29,107 +100,106 @@ ...@@ -29,107 +100,106 @@
<span v-show="!ifSend" class="sendTwo" id="sendBtn">{{count}}S后获取</span> <span v-show="!ifSend" class="sendTwo" id="sendBtn">{{count}}S后获取</span>
<button class="sure" @click="signButton()">登录</button> <button class="sure" @click="signButton()">登录</button>
<span class="account " @click="password">账号登录</span> --> <span class="account " @click="password">账号登录</span> -->
<div class="tips" style="display: none;"> <div class="tips" style="display: none">
<span>发送成功</span> <span>发送成功</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from "vue";
import store from '../store/index'; import store from "../store/index";
import $ from 'jquery' import $ from "jquery";
import {Toast,Button} from "mint-ui"; import { Toast, Button } from "mint-ui";
import { Header } from 'mint-ui'; import { Header } from "mint-ui";
Vue.component(Button.name, Button); Vue.component(Button.name, Button);
import '../../node_modules/mint-ui/lib/style.css' import "../../node_modules/mint-ui/lib/style.css";
Vue.component(Header.name, Header); Vue.component(Header.name, Header);
export default { export default {
name: "H5LiveSign",
name: 'H5LiveSign',
data() { data() {
return { return {
ifclick:true, ifclick: true,
userPhone:this.$route.query.phone, userPhone: this.$route.query.phone,
verification:'', verification: "",
count:'', count: "",
ifRed0:false, ifRed0: false,
ifRed1:false, ifRed1: false,
ifRed2:false, ifRed2: false,
ifRed3:false, ifRed3: false,
ifRed4:false, ifRed4: false,
ifRed5:false, ifRed5: false,
ifSend:true, ifSend: true,
ifClick:false, ifClick: false,
device:'', device: "",
system:'', system: "",
times:null, times: null,
timestamp:Date.parse(new Date())/1000, timestamp: Date.parse(new Date()) / 1000,
numberOne:'', numberOne: "",
numberTwo:'', numberTwo: "",
numberThree:'', numberThree: "",
numberFour:'', numberFour: "",
numberFive:'', numberFive: "",
numberSix:'', numberSix: "",
isweixin: false,
}; };
}, },
mounted() { mounted() {
this.showLog() this.showLog();
this.sendButton() this.sendButton();
}, },
methods: { methods: {
password() {
password(){ this.$router.push({
this.$router.push( path: "/password",
{
path:'/password',
}); });
}, },
changeInput(e){ // 判断是否为微信浏览器
console.log("安抚",e) isWeixinBrowser() {
if(e==0&&this.numberOne!=''){ let ua = navigator.userAgent.toLowerCase();
console.log("哈哈") return /micromessenger/.test(ua) ? true : false;
document.getElementById('secondNumber').focus(); },
this.ifRed1=true changeInput(e) {
}else if(e==1&&this.numberTwo!=''){ console.log("安抚", e);
document.getElementById('threeNumber').focus(); if (e == 0 && this.numberOne != "") {
this.ifRed2=true console.log("哈哈");
}else if(e==2&&this.numberThree!=''){ document.getElementById("secondNumber").focus();
document.getElementById('fourNumber').focus(); this.ifRed1 = true;
this.ifRed3=true } else if (e == 1 && this.numberTwo != "") {
}else if(e==3&&this.numberFour!=''){ document.getElementById("threeNumber").focus();
document.getElementById('fiveNumber').focus(); this.ifRed2 = true;
this.ifRed4=true } else if (e == 2 && this.numberThree != "") {
}else if(e==4&&this.numberFive!=''){ document.getElementById("fourNumber").focus();
document.getElementById('sixNumber').focus(); this.ifRed3 = true;
this.ifRed5=true } else if (e == 3 && this.numberFour != "") {
}else if(e==5&&this.numberSix!=''){ document.getElementById("fiveNumber").focus();
this.ifRed4 = true;
} else if (e == 4 && this.numberFive != "") {
document.getElementById("sixNumber").focus();
this.ifRed5 = true;
} else if (e == 5 && this.numberSix != "") {
// document.getElementById('threeNumber').focus(); // document.getElementById('threeNumber').focus();
// this.ifRed5=true // this.ifRed5=true
this.ifClick=true this.ifClick = true;
} }
if(e==0&&this.numberOne.length==6){ if (e == 0 && this.numberOne.length == 6) {
let stmp = this.numberOne;
let stmp=this.numberOne
console.log('啊',stmp.slice(1,2)) console.log("啊", stmp.slice(1, 2));
this.numberOne=stmp.slice(0,1) this.numberOne = stmp.slice(0, 1);
this.numberTwo=stmp.slice(1,2) this.numberTwo = stmp.slice(1, 2);
this.numberThree=stmp.slice(2,3) this.numberThree = stmp.slice(2, 3);
this.numberFour=stmp.slice(3,4) this.numberFour = stmp.slice(3, 4);
this.numberFive=stmp.slice(4,5) this.numberFive = stmp.slice(4, 5);
this.numberSix=stmp.slice(5,6) this.numberSix = stmp.slice(5, 6);
document.getElementById('sixNumber').focus(); document.getElementById("sixNumber").focus();
this.ifRed5=true this.ifRed5 = true;
this.ifclick=true this.ifclick = true;
} }
// if(this.numberOne==''){ // if(this.numberOne==''){
// document.getElementById('firstNumber').focus(); // document.getElementById('firstNumber').focus();
...@@ -151,101 +221,91 @@ export default { ...@@ -151,101 +221,91 @@ export default {
// this.ifRed5=true // this.ifRed5=true
// } // }
}, },
searchChange(e){ searchChange(e) {
// let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix // let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix
// console.log("岸上观光",verification) // console.log("岸上观光",verification)
// document.getElementById('firstNumber').focus();//设置用户名的文本框为焦点。 // document.getElementById('firstNumber').focus();//设置用户名的文本框为焦点。
if(e==0){ if (e == 0) {
this.ifRed0=true this.ifRed0 = true;
}else if(e==1){ } else if (e == 1) {
if (this.numberOne == "") {
if(this.numberOne==''){ document.getElementById("firstNumber").focus();
document.getElementById('firstNumber').focus(); this.ifRed0 = true;
this.ifRed0=true } else {
}else{ this.ifRed1 = true;
this.ifRed1=true }
} } else if (e == 2) {
}else if(e==2){ if (this.numberOne == "") {
if(this.numberOne==''){ document.getElementById("firstNumber").focus();
document.getElementById('firstNumber').focus(); this.ifRed0 = true;
this.ifRed0=true } else if (this.numberTwo == "") {
}else if(this.numberTwo==''){ document.getElementById("secondNumber").focus();
document.getElementById('secondNumber').focus(); this.ifRed1 = true;
this.ifRed1=true } else {
} this.ifRed2 = true;
else{ }
this.ifRed2=true } else if (e == 3) {
} if (this.numberOne == "") {
document.getElementById("firstNumber").focus();
}else if(e==3){ this.ifRed0 = true;
if(this.numberOne==''){ } else if (this.numberTwo == "") {
document.getElementById('firstNumber').focus(); document.getElementById("secondNumber").focus();
this.ifRed0=true this.ifRed1 = true;
}else if(this.numberTwo==''){ } else if (this.numberThree == "") {
document.getElementById('secondNumber').focus(); document.getElementById("threeNumber").focus();
this.ifRed1=true this.ifRed2 = true;
}else if(this.numberThree==''){ } else {
document.getElementById('threeNumber').focus(); this.ifRed3 = true;
this.ifRed2=true }
} } else if (e == 4) {
else{ if (this.numberOne == "") {
this.ifRed3=true document.getElementById("firstNumber").focus();
} this.ifRed0 = true;
} else if (this.numberTwo == "") {
}else if(e==4){ document.getElementById("secondNumber").focus();
if(this.numberOne==''){ this.ifRed1 = true;
document.getElementById('firstNumber').focus(); } else if (this.numberThree == "") {
this.ifRed0=true document.getElementById("threeNumber").focus();
}else if(this.numberTwo==''){ this.ifRed2 = true;
document.getElementById('secondNumber').focus(); } else if (this.numberFour == "") {
this.ifRed1=true document.getElementById("fourNumber").focus();
}else if(this.numberThree==''){ this.ifRed3 = true;
document.getElementById('threeNumber').focus(); } else {
this.ifRed2=true this.ifRed4 = true;
}else if(this.numberFour==''){ }
document.getElementById('fourNumber').focus(); } else if (e == 5) {
this.ifRed3=true if (this.numberOne == "") {
} document.getElementById("firstNumber").focus();
else{ this.ifRed0 = true;
this.ifRed4=true } else if (this.numberTwo == "") {
} document.getElementById("secondNumber").focus();
this.ifRed1 = true;
}else if(e==5){ } else if (this.numberThree == "") {
if(this.numberOne==''){ document.getElementById("threeNumber").focus();
document.getElementById('firstNumber').focus(); this.ifRed2 = true;
this.ifRed0=true } else if (this.numberFour == "") {
}else if(this.numberTwo==''){ document.getElementById("fourNumber").focus();
document.getElementById('secondNumber').focus(); this.ifRed3 = true;
this.ifRed1=true } else if (this.numberFive == "") {
}else if(this.numberThree==''){ document.getElementById("fiveNumber").focus();
document.getElementById('threeNumber').focus(); this.ifRed4 = true;
this.ifRed2=true } else {
}else if(this.numberFour==''){ this.ifRed5 = true;
document.getElementById('fourNumber').focus();
this.ifRed3=true
}else if(this.numberFive==''){
document.getElementById('fiveNumber').focus();
this.ifRed4=true
} }
else{
this.ifRed5=true
} }
if (e == 0 && this.numberOne.length == 6) {
let stmp = this.numberOne;
} console.log("啊", stmp.slice(1, 2));
if(e==0&&this.numberOne.length==6){ this.numberOne = stmp.slice(0, 1);
this.numberTwo = stmp.slice(1, 2);
let stmp=this.numberOne this.numberThree = stmp.slice(2, 3);
this.numberFour = stmp.slice(3, 4);
console.log('啊',stmp.slice(1,2)) this.numberFive = stmp.slice(4, 5);
this.numberOne=stmp.slice(0,1) this.numberSix = stmp.slice(5, 6);
this.numberTwo=stmp.slice(1,2) document.getElementById("sixNumber").focus();
this.numberThree=stmp.slice(2,3) this.ifRed5 = true;
this.numberFour=stmp.slice(3,4) this.ifclick = true;
this.numberFive=stmp.slice(4,5)
this.numberSix=stmp.slice(5,6)
document.getElementById('sixNumber').focus();
this.ifRed5=true
this.ifclick=true
} }
// console.log("dss双方都是",this.userPhone) // console.log("dss双方都是",this.userPhone)
// if(this.userPhone &&this.ifCheck==true){ // if(this.userPhone &&this.ifCheck==true){
...@@ -255,148 +315,150 @@ export default { ...@@ -255,148 +315,150 @@ export default {
// this.ifSend=false // this.ifSend=false
// } // }
}, },
searchChangeTwo(e){ searchChangeTwo(e) {
if(e==0){ if (e == 0) {
this.ifRed0=false this.ifRed0 = false;
}else if(e==1){ } else if (e == 1) {
this.ifRed1=false this.ifRed1 = false;
}else if(e==2){ } else if (e == 2) {
this.ifRed2=false this.ifRed2 = false;
}else if(e==3){ } else if (e == 3) {
this.ifRed3=false this.ifRed3 = false;
}else if(e==4){ } else if (e == 4) {
this.ifRed4=false this.ifRed4 = false;
}else if(e==5){ } else if (e == 5) {
let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix let verification =
console.log("岸上观光",verification) this.numberOne +
this.ifRed5=false this.numberTwo +
if(verification.length==6){ this.numberThree +
this.ifClick=true this.numberFour +
}else{ this.numberFive +
this.ifClick=false this.numberSix;
console.log("岸上观光", verification);
this.ifRed5 = false;
if (verification.length == 6) {
this.ifClick = true;
} else {
this.ifClick = false;
} }
} }
}, },
go_get(){ go_get() {
let temp = this.qs.stringify({
let temp=this.qs.stringify({ urlTag: "nh5",
urlTag:'nh5' });
}) this.server.live.buy_code(temp).then((res) => {
this.server.live.buy_code(temp).then(res=>{
//order成功判断内置浏览器，在微信就授权，内置微信还是浏览器 微信jsapi 浏览器h5 //order成功判断内置浏览器，在微信就授权，内置微信还是浏览器 微信jsapi 浏览器h5
console.log(res.data) console.log(res.data);
if(res.data.code==200){ if (res.data.code == 200) {
let url=res.data.data let url = res.data.data;
window.location.href=url window.location.href = url;
} }
}) });
}, },
goTo(){ goTo() {
let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix let verification =
let temp=this.qs.stringify({ this.numberOne +
pmAppVersion:884, this.numberTwo +
pmModel:'iphone', this.numberThree +
pmSystem:'ios', this.numberFour +
pmMac:11, this.numberFive +
pmOperator:'无运营商', this.numberSix;
pmIp:1, let temp = this.qs.stringify({
phone:this.userPhone, pmAppVersion: 884,
vcode:verification, pmModel: "iphone",
}) pmSystem: "ios",
this.server.login.loginByPhone(temp).then(res=>{ pmMac: 11,
let thisToken= res.data.data.token pmOperator: "无运营商",
let udPhotoFileid=res.data.data.udPhotoFileid pmIp: 1,
let name=res.data.data.udNickname phone: this.userPhone,
let ubId=res.data.data.ubId vcode: verification,
let isReg=res.data.data.isReg });
let openId=res.data.data.openId this.server.login.loginByPhone(temp).then((res) => {
sessionStorage.setItem("ubId", ubId);//用户id let thisToken = res.data.data.token;
let udPhotoFileid = res.data.data.udPhotoFileid;
let name = res.data.data.udNickname;
window.sessionStorage.setItem('token', thisToken);//token let ubId = res.data.data.ubId;
window.sessionStorage.setItem('udPhotoFileid', udPhotoFileid);//头像 let isReg = res.data.data.isReg;
sessionStorage.setItem("name", name);//用户昵称 let openId = res.data.data.openId;
sessionStorage.setItem("isReg", isReg);//是否注册 sessionStorage.setItem("ubId", ubId); //用户id
sessionStorage.setItem("openId", openId);//opendid
sessionStorage.removeItem("token");
window.sessionStorage.setItem("token", thisToken); //token
window.sessionStorage.setItem("udPhotoFileid", udPhotoFileid); //头像
sessionStorage.setItem("name", name); //用户昵称
sessionStorage.setItem("isReg", isReg); //是否注册
sessionStorage.setItem("openId", openId); //opendid
store.commit("SET_TOKEN", thisToken); store.commit("SET_TOKEN", thisToken);
// this.getLive() // this.getLive()
this.go_get() // this.go_get()
// this.$router.push( //判断是否是微信浏览器
// { if (this.isweixin) {
// path:'/', this.go_get();
} else {
// }); this.$router.push({
path: "/",
}) });
}
});
}, },
getLive(){ getLive() {
let temp=this.qs.stringify({ let temp = this.qs.stringify({
pmAppVersion:884, pmAppVersion: 884,
pmModel:'iphone', pmModel: "iphone",
pmSystem:'ios', pmSystem: "ios",
pmMac:11, pmMac: 11,
pmOperator:'无运营商', pmOperator: "无运营商",
pmIp:1, pmIp: 1,
// ubPhone:this.userPhone, // ubPhone:this.userPhone,
// vcCode:this.verification, // vcCode:this.verification,
// udPwd:pwd, // udPwd:pwd,
})
this.server.live.getLive(temp).then(res=>{
let arr=res.data.data.appSingleLiveResponseVOList
arr.forEach((i,index)=>{
if(i.lvrId==115){
console.log("撒发达",i.lvrLiveType)
if(i.lvrLiveType==0){
this.$router.push(
{
path:'/live',
}); });
}else{ this.server.live.getLive(temp).then((res) => {
this.$router.push( let arr = res.data.data.appSingleLiveResponseVOList;
{ arr.forEach((i, index) => {
path:'/fullScreen', if (i.lvrId == 115) {
console.log("撒发达", i.lvrLiveType);
if (i.lvrLiveType == 0) {
this.$router.push({
path: "/live",
});
} else {
this.$router.push({
path: "/fullScreen",
// query:{type:i.lvrStatus} // query:{type:i.lvrStatus}
}); });
} }
// lvrStatus 0 未开播、1 直播中 // lvrStatus 0 未开播、1 直播中
//lvrLiveType 0 横屏、1 竖屏 //lvrLiveType 0 横屏、1 竖屏
} }
}) });
});
})
}, },
sendButton(){ sendButton() {
// console.log("撒旦发生",this.timestamp*1000) // console.log("撒旦发生",this.timestamp*1000)
var stringA =
"app=douniucaijing&body=thisisbody&timestamp=" + this.timestamp;
let userPhone = this.userPhone;
var sign = this.$md5(stringA);
var phoneReg =
var stringA="app=douniucaijing&body=thisisbody&timestamp="+this.timestamp; /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //定义邮箱的正则表达式
let userPhone=this.userPhone
var sign = this.$md5(stringA)
var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //定义邮箱的正则表达式
if (!phoneReg.test(userPhone)) { if (!phoneReg.test(userPhone)) {
alert("您输入的手机号格式不正确"); alert("您输入的手机号格式不正确");
} else {
let temp = this.qs.stringify({
}else{ sign: sign,
let temp=this.qs.stringify({ timestamp: this.timestamp,
sign:sign, ubPhone: userPhone,
timestamp:this.timestamp, type: 2,
ubPhone:userPhone, pmAppVersion: 884,
type:2, });
pmAppVersion:884, this.server.login.getMessage(temp).then((res) => {
}) if (res.data.code == 200) {
this.server.login.getMessage(temp).then(res=>{ $(".tips").show().delay(3000).hide(300);
if(res.data.code==200){
$('.tips').show().delay(3000).hide(300)
const TIME_COUNT = 59; const TIME_COUNT = 59;
if (!this.times) { if (!this.times) {
this.count = TIME_COUNT; this.count = TIME_COUNT;
...@@ -409,15 +471,11 @@ export default { ...@@ -409,15 +471,11 @@ export default {
clearInterval(this.times); clearInterval(this.times);
this.times = null; this.times = null;
} }
}, 1000) }, 1000);
} }
} }
});
})
} }
}, },
// signButton(){ // signButton(){
...@@ -450,46 +508,57 @@ export default { ...@@ -450,46 +508,57 @@ export default {
// }) // })
// } // }
// }, // },
showLog(){ showLog() {
// 如果是微信浏览器
// if (this.isWeixinBrowser()) {
// this.isweixin= true;
let webLog = {} // }
let userAgent = navigator.userAgent let isWeixin = this.isWeixinBrowser();
// 获取微信版本 if (isWeixin) {
let m1 = userAgent.match(/MicroMessenger.*?(?= )/) this.isweixin = true;
if (m1 && m1.length > 0) { } else {
webLog.wechat = m1[0] this.isweixin = false;
} }
// 苹果手机 console.log("是多少故事", isWeixin);
if (userAgent.includes('iPhone') || userAgent.includes('iPad')) { let webLog = {};
let userAgent = navigator.userAgent;
// 获取微信版本
let m1 = userAgent.match(/MicroMessenger.*?(?= )/);
if (m1 && m1.length > 0) {
webLog.wechat = m1[0];
}
// 苹果手机
if (userAgent.includes("iPhone") || userAgent.includes("iPad")) {
// 获取设备名 // 获取设备名
if (userAgent.includes('iPad')) { if (userAgent.includes("iPad")) {
webLog.device = 'iPad' webLog.device = "iPad";
} else { } else {
webLog.device = 'iPhone' webLog.device = "iPhone";
} }
// 获取操作系统版本 // 获取操作系统版本
m1 = userAgent.match(/iPhone OS .*?(?= )/) m1 = userAgent.match(/iPhone OS .*?(?= )/);
if (m1 && m1.length > 0) { if (m1 && m1.length > 0) {
webLog.system = m1[0] webLog.system = m1[0];
} }
} }
// 安卓手机 // 安卓手机
if (userAgent.includes('Android')) { if (userAgent.includes("Android")) {
// 获取设备名 // 获取设备名
m1 = userAgent.match(/Android.*; ?(.*(?= Build))/) m1 = userAgent.match(/Android.*; ?(.*(?= Build))/);
if (m1 && m1.length > 1) { if (m1 && m1.length > 1) {
webLog.device = m1[1] webLog.device = m1[1];
} }
// 获取操作系统版本 // 获取操作系统版本
m1 = userAgent.match(/Android.*?(?=;)/) m1 = userAgent.match(/Android.*?(?=;)/);
if (m1 && m1.length > 0) { if (m1 && m1.length > 0) {
webLog.system = m1[0] webLog.system = m1[0];
} }
}
this.device=webLog.device
this.system=webLog.system
console.log("阿斯蒂芬",webLog.device)
} }
this.device = webLog.device;
this.system = webLog.system;
console.log("阿斯蒂芬", webLog.device);
},
}, },
}; };
</script> </script>
...@@ -502,17 +571,17 @@ console.log("阿斯蒂芬",webLog.device) ...@@ -502,17 +571,17 @@ console.log("阿斯蒂芬",webLog.device)
top: 0; top: 0;
background-color: black; background-color: black;
opacity: 0.4; opacity: 0.4;
} }
.whit-background{ .whit-background {
height: 90vw; height: 90vw;
width: 90vw; width: 90vw;
background-color: white; background-color: white;
position: relative; position: relative;
top: 55vw; top: 55vw;
left: 5vw; left: 5vw;
border-radius:5vw; border-radius: 5vw;
} }
.tips { .tips {
width: 40vw; width: 40vw;
text-align: center; text-align: center;
height: 10vw; height: 10vw;
...@@ -524,8 +593,8 @@ console.log("阿斯蒂芬",webLog.device) ...@@ -524,8 +593,8 @@ console.log("阿斯蒂芬",webLog.device)
border-radius: 4vw; border-radius: 4vw;
opacity: 0.6; opacity: 0.6;
line-height: 10vw; line-height: 10vw;
} }
.wbk11 { .wbk11 {
font-size: 5vw; font-size: 5vw;
text-align: center; text-align: center;
color: #797979; color: #797979;
...@@ -545,10 +614,10 @@ console.log("阿斯蒂芬",webLog.device) ...@@ -545,10 +614,10 @@ console.log("阿斯蒂芬",webLog.device)
/* border-color: rgb(213, 225, 245); */ /* border-color: rgb(213, 225, 245); */
border-left: 0px; border-left: 0px;
border-top: 0px; border-top: 0px;
border-bottom: 0.8vw solid #EFEFEF; border-bottom: 0.8vw solid #efefef;
border-right: 0px; border-right: 0px;
} }
.wbkRed{ .wbkRed {
font-size: 5vw; font-size: 5vw;
text-align: center; text-align: center;
color: red; color: red;
...@@ -570,8 +639,8 @@ console.log("阿斯蒂芬",webLog.device) ...@@ -570,8 +639,8 @@ console.log("阿斯蒂芬",webLog.device)
border-top: 0px; border-top: 0px;
border-bottom: 0.8vw solid red; border-bottom: 0.8vw solid red;
border-right: 0px; border-right: 0px;
} }
.wbk2 { .wbk2 {
font-size: 3.7vw; font-size: 3.7vw;
color: #797979; color: #797979;
position: absolute; position: absolute;
...@@ -593,30 +662,30 @@ console.log("阿斯蒂芬",webLog.device) ...@@ -593,30 +662,30 @@ console.log("阿斯蒂芬",webLog.device)
border-bottom: 0px; border-bottom: 0px;
border-right: 0px; border-right: 0px;
padding-left: 9vw; padding-left: 9vw;
} }
.send{ .send {
position: absolute; position: absolute;
left: 72vw; left: 72vw;
font-size: 3.8vw; font-size: 3.8vw;
top: 47vw; top: 47vw;
color: red; color: red;
} }
.sendTwo{ .sendTwo {
position: absolute; position: absolute;
left: 72vw; left: 72vw;
font-size: 3.8vw; font-size: 3.8vw;
top: 47vw; top: 47vw;
color: #8F8F8F; color: #8f8f8f;
} }
.title{ .title {
position: absolute; position: absolute;
left: 10vw; left: 10vw;
letter-spacing: 0.5vw; letter-spacing: 0.5vw;
font-weight: bolder; font-weight: bolder;
font-size: 6vw; font-size: 6vw;
top: 23vw; top: 23vw;
} }
.registerOne{ .registerOne {
position: absolute; position: absolute;
display: block; display: block;
letter-spacing: 0.5vw; letter-spacing: 0.5vw;
...@@ -625,37 +694,37 @@ console.log("阿斯蒂芬",webLog.device) ...@@ -625,37 +694,37 @@ console.log("阿斯蒂芬",webLog.device)
left: 10vw; left: 10vw;
color: #797979; color: #797979;
font-size: 3vw; font-size: 3vw;
} }
.registerPhone{ .registerPhone {
position: absolute; position: absolute;
left: 10vw; left: 10vw;
letter-spacing: 0.5vw; letter-spacing: 0.5vw;
font-weight: bolder; font-weight: bolder;
font-size: 5vw; font-size: 5vw;
top: 46vw; top: 46vw;
} }
.registerTwo{ .registerTwo {
position: absolute; position: absolute;
top: 70vw; top: 70vw;
left: 10vw; left: 10vw;
color: #C4C4C4; color: #c4c4c4;
font-size: 3.8vw; font-size: 3.8vw;
} }
.default-img{ .default-img {
height: 23vw; height: 23vw;
width: 23vw; width: 23vw;
position: absolute; position: absolute;
top: 112vw; top: 112vw;
left: 76vw; left: 76vw;
} }
.account{ .account {
position: absolute; position: absolute;
top: 75vw; top: 75vw;
left: 38vw; left: 38vw;
color: #797979; color: #797979;
font-size: 3.8vw; font-size: 3.8vw;
} }
.sure{ .sure {
width: 77vw; width: 77vw;
height: 13vw; height: 13vw;
border-radius: 5vw; border-radius: 5vw;
...@@ -663,10 +732,9 @@ console.log("阿斯蒂芬",webLog.device) ...@@ -663,10 +732,9 @@ console.log("阿斯蒂芬",webLog.device)
border-radius: 5vw; border-radius: 5vw;
border: 0px; border: 0px;
color: white; color: white;
background: #E11E1E; background: #e11e1e;
position: absolute; position: absolute;
top: 58vw; top: 58vw;
left: 7vw; left: 7vw;
}
}
</style> </style>
\ No newline at end of file
src/views/test.vue 0 → 100644
View file @ 834c050c
This source diff could not be displayed because it is too large. You can view the blob instead.
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