160 lines
3.3 KiB
Vue
160 lines
3.3 KiB
Vue
<template>
|
||
<div id="app" :class="isMobile?'mobile':''">
|
||
<router-view />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data(){
|
||
return {
|
||
isMobile:false
|
||
}
|
||
},
|
||
watch:{
|
||
"$route"(newName, oldName) {
|
||
var routerNow = this.$route.name;
|
||
if(routerNow=='videoLive'){
|
||
this.isMobile=true
|
||
}else{
|
||
this.isMobile=false
|
||
}
|
||
},
|
||
},
|
||
created(){
|
||
if (sessionStorage.getItem("store") ) { //在页面加载时读取sessionStorage里的状态信息
|
||
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
|
||
}
|
||
window.addEventListener("beforeunload",()=>{ //在页面刷新时将vuex里的信息保存到sessionStorage里
|
||
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
|
||
})
|
||
|
||
},
|
||
mounted(){
|
||
let inputList = document.querySelectorAll('input');
|
||
for (let index = 0; index < inputList.length; index++) {
|
||
inputList[index].onfocus = this.selectValue();//input放入焦点，全选文本
|
||
}
|
||
|
||
},
|
||
methods:{
|
||
//全选文本
|
||
selectValue(e) {
|
||
e.currentTarget.select();
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
outline: none;
|
||
font-size: 16px;
|
||
box-sizing: border-box;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
|
||
input::-webkit-outer-spin-button,
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none !important;
|
||
margin: 0;
|
||
}
|
||
#app{
|
||
min-width: 1290px;
|
||
min-height: 900px;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
&.mobile{
|
||
min-width: unset;
|
||
min-height: unset;
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
}
|
||
@font-face {
|
||
font-family: Oswald;
|
||
src: url(./assets/ttf/Oswald-Medium.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Alibaba PuHuiTi;
|
||
src: url(./assets/ttf/ALIBABA-PUHUITI-MEDIUM.OTF);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Alibaba PuHuiTiR;
|
||
src: url(./assets/ttf/ALIBABA-PUHUITI-REGULAR.OTF);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Alimama ShuHeiTiB;
|
||
src: url(./assets/ttf/Alimama_ShuHeiTi_Bold.ttf);
|
||
}
|
||
|
||
.main-title {
|
||
width: 100%;
|
||
height: 41px;
|
||
background: url(./assets/image/main-title.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
padding-left: 23px;
|
||
|
||
span {
|
||
line-height: 41px;
|
||
font-size: 20px;
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: bold;
|
||
color: #DBE8FF;
|
||
|
||
background: linear-gradient(180deg, rgba(49, 190, 255, 1) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.view-content {
|
||
width: 100%;
|
||
height: 327px;
|
||
border: 1px solid;
|
||
margin-top: 8px;
|
||
border-image: linear-gradient(180deg, rgba(142, 179, 221, 0.5) 0%, transparent 100%) 10 10;
|
||
background: linear-gradient(180deg, rgba(6, 72, 167, 0.5) 0%, rgba(6, 72, 167, 0) 100%);
|
||
|
||
}
|
||
|
||
.input-50 {
|
||
.input-title {
|
||
font-size: 16px;
|
||
font-family: Alibaba PuHuiTiR;
|
||
font-weight: 400;
|
||
color: #FFF9F9;
|
||
}
|
||
|
||
input,
|
||
.input {
|
||
width: 100%;
|
||
height: 50px;
|
||
background: url(./assets/image/left1-input.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
padding-left: 15px;
|
||
font-size: 20px;
|
||
font-family: Alibaba PuHuiTiR;
|
||
font-weight: 400;
|
||
color: #648cbb;
|
||
border: none;
|
||
line-height: 50px;
|
||
&.green{
|
||
color: #3CFDFF;
|
||
}
|
||
}
|
||
|
||
&.input-100 {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
</style>
|