315 lines
8.8 KiB
Vue
315 lines
8.8 KiB
Vue
<template>
|
|
<div class="homeBox">
|
|
<div class="nav">
|
|
<div><span class="loogText">Xuaua</span></div>
|
|
<div>
|
|
<el-popover :width="700" trigger="click">
|
|
<template #reference>
|
|
<div class="selectInput">
|
|
<div @click="selectClick">
|
|
<el-icon :size="20" >
|
|
<Search />
|
|
</el-icon>
|
|
</div>
|
|
<input type="text" placeholder="搜索关键词" v-model="selectType" />
|
|
</div>
|
|
</template>
|
|
<!-- {{ selectType }} -->
|
|
<TypeSelect @select="selectInput" :type="selectType"></TypeSelect>
|
|
</el-popover>
|
|
</div>
|
|
<div @click="router.push('/user')">
|
|
<el-avatar :size="40" :src="circleUrl" />用户名
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="mainBox">
|
|
<div class="topicInfo" ref="topicInfoRef" @click="huadong">
|
|
<div
|
|
ref="topicInfoItemRef"
|
|
style="
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: 0.7s;
|
|
"
|
|
>
|
|
<div
|
|
v-for="itme in topicInfo.topicList"
|
|
:key="itme.id"
|
|
class="topicInfoItem"
|
|
>
|
|
<TopicBox
|
|
:id="itme.id"
|
|
:videoUrl="itme.videoUrl"
|
|
:introduce="itme.introduce"
|
|
:tags="itme.tags"
|
|
:topicTitle="itme.topicTitle"
|
|
:type="itme.type"
|
|
:topicList="itme.xuauaQuestionAnswerList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="topicAnswer">
|
|
<div class="SelectAnswer">
|
|
<div @click="get">视频</div>
|
|
<div>解析</div>
|
|
<div>
|
|
<el-icon :size="27" :color="color">
|
|
<Star />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="answerInfo">
|
|
<VideoBox
|
|
:src="topicInfo.topicList[topicInfo.index - 1].videoUrl"
|
|
></VideoBox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.homeBox {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.nav {
|
|
width: 100%;
|
|
height: 8vh;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.loogText {
|
|
font-size: 30px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
.main {
|
|
width: 100%;
|
|
//占满的剩余空间
|
|
flex: 1;
|
|
background-color: #ededed;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.mainBox {
|
|
width: 97%;
|
|
height: 97%;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
.topicInfo {
|
|
// animation-duration: 2s;
|
|
// animation-delay: 250ms;
|
|
width: 30%;
|
|
height: 100%;
|
|
// background-color: #f0f9cc;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-image: url("@/assets/image/tibg.jpg");
|
|
background-size: cover; // 背景图片铺满元
|
|
// background-position: center; // 背景图片居中显示
|
|
background-repeat: no-repeat; // 背景图片不重复
|
|
background-position: left left;
|
|
.topicInfoItem {
|
|
// top: -10px;
|
|
// animation-duration: 2s;
|
|
// animation-delay: 250ms;
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: content-box;
|
|
// border: 1px solid red;
|
|
}
|
|
}
|
|
.topicAnswer {
|
|
width: 69%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.SelectAnswer {
|
|
width: 97%;
|
|
margin: 0 auto;
|
|
border-bottom: 1px #43cf7c solid;
|
|
height: 7%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.answerInfo {
|
|
width: 100%;
|
|
height: 92%;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
// background-color: #f0f9cc;
|
|
background-image: url("@/assets/image/tibg.jpg");
|
|
background-size: cover; // 背景图片铺满元
|
|
background-position: center; // 背景图片居中显示
|
|
background-repeat: no-repeat; // 背景图片不重复
|
|
}
|
|
// background-color: #F0F9CC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.selectInput {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 7px 10px;
|
|
border: 2px #000000 solid;
|
|
border-radius: 30px;
|
|
input {
|
|
background-color: #00000000; /* 透明背景 */
|
|
border: none; /* 无边框 */
|
|
outline: none; /* 去除聚焦时的轮廓 */
|
|
padding: 0; /* 无内边距 */
|
|
margin: 0; /* 无外边距 */
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<script setup>
|
|
import { reactive, ref, onMounted,watch } from "vue";
|
|
import { debounceRef} from '@/utils/debounceRef'
|
|
import TopicBox from "@/components/TopicBox.vue";
|
|
import VideoBox from "@/components/VideoBox.vue";
|
|
import TypeSelect from '@/components/TypeSelect.vue'
|
|
import { ElMessage } from "element-plus";
|
|
import "element-plus/theme-chalk/el-message.css";
|
|
import router from "@/router";
|
|
import { getQuestion } from "@/api/question/question";
|
|
const topicInfoItemRef = ref(null);
|
|
const selectType=debounceRef(null,500);
|
|
//监听selectType
|
|
watch(selectType,(newValue)=>{
|
|
console.log("新值",newValue);
|
|
})
|
|
const topicInfo = reactive({
|
|
index: 1,
|
|
number: 3,
|
|
topicList: [{ id: 1 }, { id: 2 }, { id: 3 }],
|
|
});
|
|
let mouseDown = false;
|
|
const selectInput=(word)=>{
|
|
selectType.value=word;
|
|
}
|
|
const selectClick=async()=>{
|
|
let res = await getQuestionInfo(selectType.value);
|
|
topicInfo.index=1;
|
|
topicInfo.topicList = res;
|
|
topicInfo.number = res.length;
|
|
}
|
|
// 鼠标按下时的位
|
|
let lastY = null;
|
|
//实时鼠标位
|
|
let currentY = null;
|
|
// 鼠标按下时触发的事件
|
|
const huadong = () => {};
|
|
document.addEventListener("mousedown", function (event) {
|
|
mouseDown = true;
|
|
// lastX = event.clientX;
|
|
lastY = event.clientY;
|
|
// currentX = event.clientX;
|
|
currentY = event.clientY;
|
|
// console.log("鼠标按下位置:", lastX, lastY);
|
|
|
|
// 开始实时监听鼠标移动
|
|
document.addEventListener("mousemove", onMouseMove);
|
|
});
|
|
// 鼠标移动时触发的事件
|
|
function onMouseMove(event) {
|
|
if (mouseDown) {
|
|
let deltaY = event.clientY - currentY;
|
|
currentY = event.clientY;
|
|
setScrollY(deltaY);
|
|
}
|
|
}
|
|
// 鼠标松开时触发的事件
|
|
document.addEventListener("mouseup", function (event) {
|
|
mouseDown = false;
|
|
let deltaY = event.clientY - lastY;
|
|
console.log("变化", deltaY);
|
|
flipPage(deltaY);
|
|
document.removeEventListener("mousemove", onMouseMove);
|
|
});
|
|
const topicInfoRef = ref(null);
|
|
const get = () => {
|
|
console.log("信息", getScrollbarPosition());
|
|
};
|
|
const setScrollY = (y) => {
|
|
if (topicInfoRef.value) {
|
|
topicInfoRef.value.scrollTop = topicInfoRef.value.scrollTop - y;
|
|
}
|
|
};
|
|
const flipPage = (y) => {
|
|
if (topicInfoItemRef.value) {
|
|
topicInfoRef.value.scrollTop = 0;
|
|
if (y < -80) {
|
|
topicInfo.index++;
|
|
if (topicInfo.index > topicInfo.number) {
|
|
topicInfo.index = topicInfo.number;
|
|
ElMessage({ message: "没有更多了", type: "warning" });
|
|
}
|
|
if (topicInfo.index == topicInfo.number) {
|
|
//最后一个了准备记载新数据
|
|
// topicInfo.number+=3;
|
|
// topicInfo.topicList=[...topicInfo.topicList,...[{id:topicInfo.number+1},{id:topicInfo.number+2},{id:topicInfo.number+3}
|
|
// ]]
|
|
}
|
|
}
|
|
else if (y > 80) {
|
|
topicInfo.index--;
|
|
if (topicInfo.index == 0) {
|
|
topicInfo.index = 1;
|
|
ElMessage({ message: "到顶了", type: "warning" });
|
|
}
|
|
}
|
|
|
|
// alert("123")
|
|
topicInfoItemRef.value.style.top =
|
|
-(topicInfo.index - 1) * topicInfoItemRef.value.clientHeight + "px";
|
|
}
|
|
};
|
|
const getScrollbarPosition = () => {
|
|
if (topicInfoRef.value) {
|
|
const element = topicInfoRef.value;
|
|
return {
|
|
scrollLeft: element.scrollLeft, // 水平滚动条位置
|
|
scrollTop: element.scrollTop, // 垂直滚动条位置
|
|
scrollWidth: element.scrollWidth, // 元素内容的总宽度
|
|
scrollHeight: element.scrollHeight, // 元素内容的总高度
|
|
clientWidth: element.clientWidth, // 元素可视区域的宽度
|
|
clientHeight: element.clientHeight, // 元素可视区域的高度
|
|
};
|
|
}
|
|
return null;
|
|
};
|
|
const getQuestionInfo = async (type) => {
|
|
let res = await getQuestion(type);
|
|
console.log("res", res);
|
|
return res.data;
|
|
};
|
|
onMounted(async () => {
|
|
let res = await getQuestionInfo();
|
|
topicInfo.index=1;
|
|
topicInfo.topicList = res;
|
|
topicInfo.number = res.length;
|
|
console.log("topicInfo", topicInfo);
|
|
});
|
|
</script>
|