优化
This commit is contained in:
zyronon
parent
811fd5945c
commit
17ed5f280b
@ -127,7 +127,7 @@ onMounted(() => {
|
||||
.bottom {
|
||||
height: 100% - @th;
|
||||
background: red;
|
||||
background: linear-gradient(to bottom, @eColor, white);
|
||||
background: linear-gradient(to bottom, @eColor, #e1e1e1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -223,7 +223,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.fixed {
|
||||
background: white;
|
||||
background: #e1e1e1;
|
||||
}
|
||||
|
||||
@p: 5rem;
|
||||
|
||||
@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<SlideItem id="slide0">
|
||||
<div class="sub-type"
|
||||
:class="state.subTypeIsTop?'top':''"
|
||||
ref="subTypeRef">
|
||||
<div class="local">
|
||||
<div class="card" @touchmove.capture="stop">
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>美食</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>休闲娱乐</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>游玩</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>丽人/美发</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>住宿</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>游玩</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>丽人/美发</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>住宿</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-type-notice"
|
||||
v-if="state.subType===-1 && !state.subTypeVisible"
|
||||
@click="showSubType">附近吃喝玩乐
|
||||
</div>
|
||||
<SlideList
|
||||
:active="props.active"
|
||||
:style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
|
||||
:api="api.videos.recommended"
|
||||
@touchstart="pageClick"
|
||||
html-id="slide0-list"
|
||||
/>
|
||||
</SlideItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
|
||||
import bus, {EVENT_KEY} from "@/utils/bus";
|
||||
import Utils from "@/utils";
|
||||
import api from "@/api";
|
||||
import Loading from "@/components/Loading.vue";
|
||||
import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
|
||||
import SlideList from './SlideList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:item',
|
||||
'goUserInfo',
|
||||
'showComments',
|
||||
'showShare',
|
||||
'goMusic',
|
||||
])
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
}
|
||||
}
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
|
||||
|
||||
function showSubType(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
console.log('subTypeRef',)
|
||||
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
|
||||
state.subTypeVisible = true
|
||||
setTimeout(() => state.subTypeIsTop = true, 300)
|
||||
bus.emit(EVENT_KEY.OPEN_SUB_TYPE,)
|
||||
}
|
||||
|
||||
function pageClick(e) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,)
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
#slide0 {
|
||||
position: relative;
|
||||
|
||||
.sub-type {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
&.top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.local {
|
||||
transition: all .3s;
|
||||
font-size: 14rem;
|
||||
color: gray;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.card {
|
||||
margin: 20rem;
|
||||
margin-top: @header-height;
|
||||
padding: 20rem;
|
||||
border-radius: 8rem;
|
||||
width: 100%;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@width: 35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 17vw;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-type-notice {
|
||||
position: fixed;
|
||||
background: rgba(black, .4);
|
||||
top: 100rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 10rem;
|
||||
z-index: 3;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#slide0-infinite {
|
||||
z-index: 1;
|
||||
margin-top: 0;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user