From 07624d5556ca35d7e92409ddb01b41de95ccfbab Mon Sep 17 00:00:00 2001 From: Wangwei <870653736@qq.com> Date: Tue, 14 Feb 2023 21:33:20 +0800 Subject: [PATCH] =?UTF-8?q?add:=E7=9B=B4=E6=92=AD=E5=93=8D=E5=BA=94?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/base.css | 17 + src/components/Footer.vue | 4 +- src/components/Header.vue | 6 +- src/router.js | 1 + src/views/index.vue | 111 +++--- src/views/live/live.vue | 667 ++++++++++++++++++++++++++++++++- src/views/video/indexVideo.vue | 2 +- 7 files changed, 732 insertions(+), 76 deletions(-) diff --git a/src/assets/css/base.css b/src/assets/css/base.css index 85bc48a..d53cdd8 100644 --- a/src/assets/css/base.css +++ b/src/assets/css/base.css @@ -556,6 +556,23 @@ a:hover { width: 96% !important; height: 96% !important; } +.btn-hot { + letter-spacing: 4px; + margin-top: 6px; + display: block; + color: #fff; + text-align: center; + font-size: 16px; + width: 200px; + height: 44px; + line-height: 44px; + background: linear-gradient(270deg, #FF7C6B 0%, #FF4B72 100%); + border-radius: 8px; +} +.btn-hot:hover{ + color: #fff; +} + @keyframes cpgradientBG { 0% { background-position: 0% 50%; diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 7e47e73..70f2025 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -51,7 +51,7 @@ background: #fff; padding: 24px 0; margin-top: 40px; - border-top: #CEDDF2 solid 1px; + border-top: #EAF0F9 solid 1px; } .foot_logo { @@ -92,7 +92,7 @@ .m-footr { display: none; background-color: #fff; - border-top: #CEDDF2 solid 1px; + border-top: #EAF0F9 solid 1px; text-align: center; font-size: 14px; padding: 14px 0; diff --git a/src/components/Header.vue b/src/components/Header.vue index 8ce0737..af98faf 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -380,9 +380,9 @@ state.wwwUrl = proxy.$root.com_edu_url + to.path; }) - window.onresize = () => { - state.isPc = document.body.clientWidth > 1200; - } + window.addEventListener('resize', function() { + state.isPc = document.body.clientWidth > 1200; + }); const fetchMenuList = async () => { const res = await getMenuList(); diff --git a/src/router.js b/src/router.js index 83e4eb1..38e2bd6 100644 --- a/src/router.js +++ b/src/router.js @@ -193,6 +193,7 @@ const routes = [ component: () => import('@/views/live/live.vue'), meta: { title: '直播 - 帆软学院', + isMobile: 1, }, }, diff --git a/src/views/index.vue b/src/views/index.vue index 396d995..5f2a93a 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -8,7 +8,8 @@ 查看更多 - +
  • @@ -333,6 +334,16 @@ FineBI: [], jiandaoyun: [], catelist: [], + liveBoxHeiht: 220 + }); + + const liveBoxHeiht = () => { + let vw = document.body.clientWidth; + state.liveBoxHeiht = vw <= 660 ? 400 : 220; + } + liveBoxHeiht(); + window.addEventListener('resize', function () { + liveBoxHeiht(); }); const fetchnewLiveList = async () => { @@ -602,7 +613,6 @@ /* 直播课程 */ .live-box { margin-top: 2px; - height: 220px; .item { background: #fff; @@ -1087,59 +1097,61 @@ } } - .info { - display: block !important; - width: auto !important; - margin-left: 28px !important; - justify-content: space-between; - align-items: center; - overflow: hidden; + .live-box { + .info { + display: block !important; + width: auto !important; + margin-left: 28px !important; + justify-content: space-between; + align-items: center; + overflow: hidden; - .lfbox { - width: 96% !important; - height: auto !important; + .lfbox { + width: 96% !important; + height: auto !important; - h2 { - font-size: 16px !important; - padding: 28px 0 8px; - } + h2 { + font-size: 16px !important; + padding: 28px 0 8px; + } - .m_description { - font-size: 14px; - color: #808696; - } + .m_description { + font-size: 14px; + color: #808696; + } - .speaker-uid { - border-radius: 100px; - width: 40px; - height: 40px; - } + .speaker-uid { + border-radius: 100px; + width: 40px; + height: 40px; + } - .speaker { - margin-top: 30px; + .speaker { + margin-top: 30px; - img { - margin-right: 12px; - } + img { + margin-right: 12px; + } - p { - line-height: 22px; - font-size: 12px; - } + p { + line-height: 22px; + font-size: 12px; + } - p:nth-child(2) { - font-weight: 600; + p:nth-child(2) { + font-weight: 600; + } } } - } - .rtbox { - align-items: flex-start !important; - height: 100px; - margin-right: 0 !important; + .rtbox { + align-items: flex-start !important; + height: 100px; + margin-right: 0 !important; - .btn-008-big { - padding: 10px 30px !important; + .btn-008-big { + padding: 10px 30px !important; + } } } } @@ -1205,6 +1217,7 @@ top: 0 !important; width: auto !important; min-width: 150px; + max-width: 150px; height: 100px !important; border-radius: 8px; transition: all .3s; @@ -1259,18 +1272,6 @@ /* 直播 */ .live-box { margin-top: 2px; - height: 400px !important; - - &.el-carousel--horizontal { - overflow: hidden !important; - } - - .el-carousel__container { - height: 400px !important; - - } - - .item { background: #fff; height: 386px !important; diff --git a/src/views/live/live.vue b/src/views/live/live.vue index b761f40..ab23d65 100644 --- a/src/views/live/live.vue +++ b/src/views/live/live.vue @@ -1,6 +1,6 @@ @@ -135,12 +265,19 @@ import { reactive, toRefs } from "vue"; import { getLiveList, getLiveFocus } from "@/api/live"; import store from '@/store'; + import { Button, List, Cell } from 'vant'; export default { name: "live", + components: { + [Button.name]: Button, + [List.name]: List, + [Cell.name]: Cell, + }, setup() { const state = reactive({ liveList: [], liveFocusList: [], + liveFocusListWap: [], activeIndex: 0, obj: {}, total: 0, @@ -148,7 +285,13 @@ page: 1, perpage: 8 }, - lvie_cur: 0 + lvie_cur: 0, + loading: true, + loading_m: false, + live_total: 0, + max_total: false, + start_perpage: 16, + onresize: '', }) const fetchLiveFocus = async () => { @@ -158,6 +301,7 @@ const res = await getLiveFocus(params) if (res.code === 200) { state.liveFocusList = res.data; + state.liveFocusListWap = res.data.filter(t => t.playstate > 0); state.liveFocusList.forEach((item) => { if (item.playstate > '0') { state.obj = state.liveFocusList[1] @@ -191,35 +335,531 @@ // },500); - const fetchLiveList = async () => { + const fetchLiveList = async (query) => { const params = { - ...state.query + ...query } const res = await getLiveList(params) if (res.code === 200) { state.liveList = res.data.data state.total = res.data.total + + state.loading = false; + state.live_total = res.data.total; + + // 没有更多了 + if (state.start_perpage > res.data.total) { + state.max_total = true; + } else { + state.max_total = false; + } } } const fetchAllData = () => { return Promise.all([ fetchLiveFocus(), - fetchLiveList(), + fetchLiveList(state.query), ]) } + fetchAllData(); + - fetchAllData() + // 滚动加载 + const loadVlist = () => { + setTimeout(() => { + state.start_perpage += 8 + const params = { + ...state.query, + perpage: state.start_perpage + }; + // if (state.onresize < 1200) { + state.liveList.push(fetchLiveList(params)); + // } + + state.loading_m = false; + + }, 800); + } return { ...toRefs(state), changeLiveFocus, - handleCurrentChange + handleCurrentChange, + loadVlist, }; }, }; + + + + +