hookehuyr

fix 处理首页位置问题

......@@ -3,7 +3,8 @@ export default [{
name: '首页',
component: () => import('./views/client/index.vue'),
meta: {
title: '童声无界'
title: '童声无界',
name: 'index'
},
children: []
}, {
......@@ -11,7 +12,8 @@ export default [{
name: '客户端入口页',
component: () => import('./views/client/index.vue'),
meta: {
title: '童声无界'
title: '童声无界',
name: 'index'
},
children: []
}, {
......
......@@ -22,6 +22,8 @@
</template>
<script setup>
import { mainStore } from '@/store'
import Cookies from 'js-cookie'
import 'animate.css';
import icon_subscribed from '@images/icon-dingyue01@2x.png'
......@@ -31,12 +33,30 @@ import MyButton from '@/components/MyButton/index.vue'
import $ from 'jquery';
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { Toast } from 'vant';
import { nextTick, onMounted, reactive, ref } from 'vue'
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import axios from '@/utils/axios';
// 滚动条判断
function hasScrollbar() {
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}
onMounted(() => {
// TODO: 临时处理位置不对问题
// 因为微信第一次进入默认全屏,之后产生的导航栏会影响位置
if (hasScrollbar()) {
location.reload()
}
})
const $route = useRoute();
const $router = useRouter();
// TAG: keepAlive 缓存页面
const store = mainStore();
store.keepThisPage($route.meta.name);
// 自定义按钮颜色样式
const styleObject1 = reactive({
backgroundColor: '#FFFFFF',
......@@ -62,7 +82,7 @@ const goSchool = () => { // 跳转选择幼儿园页面
Cookies.set('userType', 'client'); // 客户标识
}
onMounted (() => {
onMounted(() => {
// 背景颜色全屏
$('.client-index-page').height($(document).height());
})
......@@ -105,12 +125,13 @@ import mixin from 'common/mixin'
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
export default {
name: 'index',
mixins: [mixin.init],
data () {
data() {
return {
}
},
mounted () {
mounted() {
},
methods: {
......@@ -119,35 +140,41 @@ export default {
</script>
<style lang="less" scoped>
.client-index-page {
.client-index-page {
// 背景图 宽度100% 高度控制
background-image: url('@images/yindao@2x.png');
background-repeat: no-repeat;
width: 100%;
background-size: 100% 85%;
position: relative;
}
}
.entry-wrapper {
.entry-wrapper {
position: absolute;
bottom: 0;
bottom: 1rem;
width: 100%;
.text {
color: #B8B8B8;
margin: 1rem;
margin-bottom: 0;
}
.control {
margin: 1rem;
margin-top: 0.5rem;
overflow: auto;
.plain {
width: 28%; float: left;
width: 28%;
float: left;
margin-right: 3%;
}
.primary {
width: 69%; float: left;
}
width: 69%;
float: left;
}
}
}
</style>
......