123 lines
2.8 KiB
Vue
123 lines
2.8 KiB
Vue
|
<!-- 纯富文本展示页 -->
|
||
|
|
<template>
|
||
|
|
<!-- #ifdef APP -->
|
||
|
|
<view class="login" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
|
||
|
|
<view class="app-top" :style="{ height: CustomBar+'rpx',
|
||
|
|
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifndef APP -->
|
||
|
|
<view class="login" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="lg-top">
|
||
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
||
|
|
<!-- #ifndef MP-WEIXIN -->
|
||
|
|
<u-icon name="arrow-left" size="40" class="back" @click="back"
|
||
|
|
:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
|
||
|
|
<image :src="myFileUrl+logo"></image>
|
||
|
|
<view style="width: 75rpx;"></view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifdef MP-WEIXIN -->
|
||
|
|
<image :src="myFileUrl+logo"></image>
|
||
|
|
<!-- #endif -->
|
||
|
|
</view>
|
||
|
|
<view class="lg-content">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<Loading :show="loading" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import configService from '@/common/config.service.js';
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
content: '',
|
||
|
|
loading: true,// 加载
|
||
|
|
// 基础路径
|
||
|
|
myFileUrl: configService.fileUrl + 'pixel/my/',
|
||
|
|
// 我的页面背景
|
||
|
|
background: 'bluetext-background.png',
|
||
|
|
// logo图标
|
||
|
|
logo: 'logo.png',
|
||
|
|
// 顶部距离等级
|
||
|
|
topLevel: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// #ifndef H5
|
||
|
|
onPageScroll(e) {
|
||
|
|
const level = e.scrollTop/60;
|
||
|
|
if(level<=1) this.topLevel = level;
|
||
|
|
else this.topLevel = 1;
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef H5
|
||
|
|
mounted(){
|
||
|
|
let that = this;
|
||
|
|
window.onscroll = function () {
|
||
|
|
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
||
|
|
//scrollTop就是触发滚轮事件时滚轮的高度
|
||
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||
|
|
const level = scrollTop/60;
|
||
|
|
if(level<=1) that.topLevel = level;
|
||
|
|
else that.topLevel = 1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onHide() {
|
||
|
|
window.onscroll = null;
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
methods:{
|
||
|
|
// 返回
|
||
|
|
back(){
|
||
|
|
uni.navigateBack();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.loading = false;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.login{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 100vh;
|
||
|
|
background-size: cover;
|
||
|
|
.lg-top{
|
||
|
|
// #ifdef APP
|
||
|
|
.app-top{
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 81;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
.mobile-logo{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
// #ifndef MP-WEIXIN
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.back{
|
||
|
|
margin-left: 35rpx;
|
||
|
|
margin-top: 5rpx
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
position: fixed;
|
||
|
|
z-index: 81;
|
||
|
|
padding: 15rpx 0;
|
||
|
|
image{
|
||
|
|
width: 200rpx;
|
||
|
|
height: 45rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|