You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
6.3 KiB
351 lines
6.3 KiB
<script>
|
|
export default {
|
|
onLaunch: function() {
|
|
console.log('App Launch')
|
|
},
|
|
onShow: async function() {
|
|
const res = await this.$api.getCompany({})
|
|
uni.setStorageSync("companyInfo",res.data)
|
|
const res1 = await this.$api.getNavScode({})
|
|
uni.setStorageSync("navInfo",res1.data)
|
|
function remSize(){
|
|
var deviceWidth = document.documentElement.clientWidth || window.innerWidth; //兼容多浏览器
|
|
|
|
//限制宽度
|
|
if(deviceWidth >= 750){
|
|
deviceWidth = 750
|
|
}
|
|
if(deviceWidth <= 320){
|
|
deviceWidth = 320
|
|
}
|
|
|
|
/*
|
|
为什么除以7.5呢？是因为结果比较好计算，这也是可以根据设计稿的宽度来决定的。
|
|
例如设计稿宽度是750px，那么将html的font-size设置成750/7.5=100px，那么1rem就相当于100px。当屏幕宽度不同的时候，也可以达到自适应的效果。
|
|
*/
|
|
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
|
|
document.querySelector('body').style.fontSize = 0.16 + 'rem' //相当于16px
|
|
}
|
|
remSize()
|
|
//调整窗口大小时调用函数
|
|
window.onresize = ()=> remSize()
|
|
|
|
console.log('App Show')
|
|
},
|
|
onHide: function() {
|
|
console.log('App Hide')
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
/*每个页面公共css */
|
|
page{
|
|
background-color: #F3F4F5;
|
|
overflow: hidden;
|
|
}
|
|
.menu{
|
|
width: 250px;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
z-index: 122;
|
|
background-color: #f5f5f5;
|
|
padding-top: 100px;
|
|
box-sizing: border-box;
|
|
animation: fade 1s;
|
|
@keyframes fade {
|
|
from {left:-200px;}
|
|
to {left: 0;}
|
|
}
|
|
.btn{
|
|
width: 80px;
|
|
text-align: center;
|
|
background-color: #211E70;
|
|
font-size: 15px;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
line-height: 50px;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -40px;
|
|
bottom: 50px;
|
|
z-index: 2;
|
|
}
|
|
.li{
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
flex: 1;
|
|
max-width: 180px;
|
|
text-align: center;
|
|
padding: 25px 0;
|
|
transition: all 0.2s;
|
|
.title{
|
|
color: #333333;
|
|
}
|
|
.desc{
|
|
display: none;
|
|
}
|
|
&-on{
|
|
.title{
|
|
color: #211E70;
|
|
font-weight: bold;
|
|
}
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 5px;
|
|
height: 30px;
|
|
background: #211E70;
|
|
border-radius: 3px;
|
|
left: 0;
|
|
top: 50%;
|
|
margin-top: -15px;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.header{
|
|
width: 100%;
|
|
height: 80px;
|
|
background: #FFFFFF;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 55;
|
|
padding: 0 10%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.logo{
|
|
width: 165px;
|
|
height: 45px;
|
|
cursor: pointer;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.icon{
|
|
display: none;
|
|
image{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
.nav{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.li{
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
flex: 1;
|
|
max-width: 180px;
|
|
text-align: center;
|
|
padding: 25px 0;
|
|
transition: all 0.2s;
|
|
.title{
|
|
color: #333333;
|
|
}
|
|
.desc{
|
|
display: none;
|
|
}
|
|
&-on{
|
|
.title{
|
|
color: #211E70;
|
|
font-weight: bold;
|
|
}
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 34px;
|
|
height: 6px;
|
|
background: #211E70;
|
|
border-radius: 3px;
|
|
left: 50%;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
margin-left: -17px;
|
|
}
|
|
}
|
|
&:hover{
|
|
.title{
|
|
color: #211E70;
|
|
font-weight: bold;
|
|
}
|
|
.desc{
|
|
width: 100%;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 74px;
|
|
z-index: 2;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
.item{
|
|
width: 100%;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
transition: all 0.2s;
|
|
&:hover{
|
|
color: #211E70;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
height: 370px;
|
|
background: #ececec;
|
|
.d{
|
|
height: 115px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 10%;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
.t{
|
|
padding: 40px 0 0;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
.a{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.a1{
|
|
margin-left: 25px;
|
|
}
|
|
image{
|
|
width: 100px;
|
|
height: 100px;
|
|
&:first-child{
|
|
// margin-right: 25px;
|
|
}
|
|
}
|
|
}
|
|
.b{
|
|
font-size: 16px;
|
|
color: #000000;;
|
|
text-align: center;
|
|
margin-top: 18px;
|
|
}
|
|
.c{
|
|
font-size: 16px;
|
|
color: #000000;;
|
|
text-align: center;
|
|
margin-top: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 小设备 (平板电脑和大型手机，600 像素及以下) */
|
|
@media only screen and (max-width: 599px) {
|
|
.header{
|
|
padding: 0 2%;
|
|
.nav{
|
|
display: none;
|
|
}
|
|
.icon{
|
|
display: block;
|
|
}
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
.d{
|
|
display: block;
|
|
.p{
|
|
flex: 1;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* 小设备 (平板电脑和大型手机，600 像素及以上) */
|
|
@media only screen and (min-width: 600px) and (max-width: 767px) {
|
|
.header{
|
|
padding: 0 2%;
|
|
.nav{
|
|
display: none;
|
|
}
|
|
.icon{
|
|
display: block;
|
|
}
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
.d{
|
|
display: block;
|
|
.p{
|
|
flex: 1;
|
|
text-align: center;
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 中型设备（平板电脑，768 像素及以上） */
|
|
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
|
.header{
|
|
padding: 0 2%;
|
|
.nav{
|
|
display: none;
|
|
}
|
|
.icon{
|
|
display: block;
|
|
}
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
.d{
|
|
display: block;
|
|
.p{
|
|
flex: 1;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
|
|
@media only screen and (min-width: 992px) and (max-width: 1199px) {
|
|
.header{
|
|
padding: 0 2%;
|
|
.nav{
|
|
display: none;
|
|
}
|
|
.icon{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
|
|
@media only screen and (min-width: 1200px) and (max-width: 1350px){
|
|
.header{
|
|
width: 100%;
|
|
padding: 0 5%;
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|