|
|
@@ -7,7 +7,7 @@ let videosData = $ref({
|
|
|
request({
|
|
|
baseURL: window.GLOBAL_CONFIG.api,
|
|
|
url: '/aimooc/spjj/main',
|
|
|
-}).then(res => {
|
|
|
+}).then((res) => {
|
|
|
videosData = res.data
|
|
|
})
|
|
|
|
|
|
@@ -18,9 +18,10 @@ function viewMore() {
|
|
|
|
|
|
function goDetail(item) {
|
|
|
router.push({
|
|
|
- path: '/frontpage/videoDetail', query: {
|
|
|
- as_id: item.as_id
|
|
|
- }
|
|
|
+ path: '/frontpage/videoDetail',
|
|
|
+ query: {
|
|
|
+ as_id: item.as_id,
|
|
|
+ },
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
@@ -28,70 +29,110 @@ function goDetail(item) {
|
|
|
<template>
|
|
|
<div style="display: flex;height: 500px;">
|
|
|
<div style="width: 50%;height: 100%;">
|
|
|
- <div style="background-color: #f7f6fb;height: 230px;width: 50%;margin-top: 10%;"></div>
|
|
|
- </div>
|
|
|
- <div style="width: 50%;height: 100%;background-color: #f7f6fb;">
|
|
|
-
|
|
|
+ <div style="background-color: #f7f6fb;height: 230px;width: 50%;margin-top: 10%;" />
|
|
|
</div>
|
|
|
+ <div style="width: 50%;height: 100%;background-color: #f7f6fb;" />
|
|
|
</div>
|
|
|
<div style="height: 700px;max-height:700px;margin-top: -500px;">
|
|
|
<div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
|
|
|
- <img src="../../../assets/divider.png" style="width: 1200px;" />
|
|
|
+ <img src="../../../assets/divider.png" style="width: 1200px;">
|
|
|
</div>
|
|
|
<div style="display: flex;width: 100%;">
|
|
|
<div style="width: 900px;margin-left: calc((100% - 1200px)/2);">
|
|
|
<div style="display: flex;margin-top: 60px;">
|
|
|
- <div v-if="videosData.videos_one[0]" @click="goDetail(videosData.videos_one[0])"
|
|
|
- style="width: 300px;padding: 0 5px;cursor: pointer;">
|
|
|
- <el-image :src="videosData.videos_one[0].as_img"
|
|
|
- style="width: 100%;border-radius: 12px;width: 290px;height: 188px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_one[0].as_title }}</div>
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_one[0]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_one[0])"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_one[0].as_img"
|
|
|
+ style="width: 100%;border-radius: 12px;width: 290px;height: 188px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_one[0].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_one[1]" @click="goDetail(videosData.videos_one[1])"
|
|
|
- style="width: 300px;padding: 0 5px;cursor: pointer;">
|
|
|
- <el-image :src="videosData.videos_one[1].as_img"
|
|
|
- style="width: 100%;border-radius: 12px;width: 290px;height: 188px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_one[1].as_title }}</div>
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_one[1]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_one[1])"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_one[1].as_img"
|
|
|
+ style="width: 100%;border-radius: 12px;width: 290px;height: 188px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_one[1].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_one[2]" @click="goDetail(videosData.videos_one[2])"
|
|
|
- style="width: 300px;padding: 0 5px;cursor: pointer;">
|
|
|
- <el-image :src="videosData.videos_one[2].as_img"
|
|
|
- style="width: 100%;border-radius: 12px;width: 290px;height: 188px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_one[2].as_title }}</div>
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_one[2]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_one[2])"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_one[2].as_img"
|
|
|
+ style="width: 100%;border-radius: 12px;width: 290px;height: 188px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_one[2].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="width: 300px;background-color: #9f93cd;height: 300px;">
|
|
|
<div style="display: flex;flex-direction: column;justify-content: center;height: 100%;">
|
|
|
- <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">精品课程</div>
|
|
|
- <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">PREMIUM</div>
|
|
|
- <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">COURSES</div>
|
|
|
- <div style="color: white;cursor: pointer;text-align: center;" @click="viewMore()">查看更多 》</div>
|
|
|
+ <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
|
|
|
+ 精品课程
|
|
|
+ </div>
|
|
|
+ <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
|
|
|
+ PREMIUM
|
|
|
+ </div>
|
|
|
+ <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
|
|
|
+ COURSES
|
|
|
+ </div>
|
|
|
+ <div style="color: white;cursor: pointer;text-align: center;" @click="viewMore()">
|
|
|
+ 查看更多 》
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="width: calc((100% - 1200px)/2);background-color: #9f93cd;height: 300px;"></div>
|
|
|
+ <div style="width: calc((100% - 1200px)/2);background-color: #9f93cd;height: 300px;" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style="display: flex;width: 1200px;margin-left: calc((100% - 1200px)/2);margin-top: 30px;">
|
|
|
- <div v-if="videosData.videos_one[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_one[3])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_one[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_one[3])"
|
|
|
+ >
|
|
|
<el-image :src="videosData.videos_one[3].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_one[3].as_title }}</div>
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_one[3].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_one[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_one[4])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_one[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_one[4])"
|
|
|
+ >
|
|
|
<el-image :src="videosData.videos_one[4].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_one[4].as_title }}</div>
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_one[4].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_one[5]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_one[5])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_one[5]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_one[5])"
|
|
|
+ >
|
|
|
<el-image :src="videosData.videos_one[5].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_one[5].as_title }}</div>
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_one[5].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_one[6]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_one[6])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_one[6]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_one[6])"
|
|
|
+ >
|
|
|
<el-image :src="videosData.videos_one[6].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_one[6].as_title }}</div>
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_one[6].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -99,62 +140,102 @@ function goDetail(item) {
|
|
|
|
|
|
<div style="height: 600px;">
|
|
|
<div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
|
|
|
- <img src="../../../assets/divider.png" style="width: 1200px;" />
|
|
|
+ <img src="../../../assets/divider.png" style="width: 1200px;">
|
|
|
</div>
|
|
|
<div style="width: 100%;">
|
|
|
<div style="width: 1200px;display: flex;margin-left: calc((100% - 1200px)/2);">
|
|
|
- <div v-if="videosData.videos_two[0]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_two[0])">
|
|
|
- <img src="../../../assets/champion.png" class="cornerMarkImg" />
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_two[0]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_two[0])"
|
|
|
+ >
|
|
|
+ <img src="../../../assets/champion.png" class="cornerMarkImg">
|
|
|
<div class="cornerMark" style="background-color: #f2dc8c;margin-top: -3px;">
|
|
|
- 1</div>
|
|
|
- <el-image :src="videosData.videos_two[0].as_img"
|
|
|
- style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_two[0].as_title }}</div>
|
|
|
+ 1
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_two[0].as_img"
|
|
|
+ style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_two[0].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_two[1]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_two[1])">
|
|
|
- <img src="../../../assets/secondWinner.png" class="cornerMarkImg" />
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_two[1]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_two[1])"
|
|
|
+ >
|
|
|
+ <img src="../../../assets/secondWinner.png" class="cornerMarkImg">
|
|
|
<div class="cornerMark" style="background-color: #d7d8d8;margin-top: -3px;">
|
|
|
- 2</div>
|
|
|
- <el-image :src="videosData.videos_two[1].as_img"
|
|
|
- style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_two[1].as_title }}</div>
|
|
|
+ 2
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_two[1].as_img"
|
|
|
+ style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_two[1].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_two[2]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_two[2])">
|
|
|
- <img src="../../../assets/thirdWinner.png" class="cornerMarkImg" />
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_two[2]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_two[2])"
|
|
|
+ >
|
|
|
+ <img src="../../../assets/thirdWinner.png" class="cornerMarkImg">
|
|
|
<div class="cornerMark" style="background-color: #ff4f32;margin-top: -3px;">
|
|
|
- 3</div>
|
|
|
- <el-image :src="videosData.videos_two[2].as_img"
|
|
|
- style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_two[2].as_title }}</div>
|
|
|
+ 3
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_two[2].as_img"
|
|
|
+ style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_two[2].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex;margin-top: 30px;">
|
|
|
<div
|
|
|
- style="background-color: #9f93cd;height: 220px;width: calc((100% - 1200px)/2 + 600px);display: flex;justify-content: flex-end;">
|
|
|
+ style="background-color: #9f93cd;height: 220px;width: calc((100% - 1200px)/2 + 600px);display: flex;justify-content: flex-end;"
|
|
|
+ >
|
|
|
<div style="width: 600px;height: 220px;display: flex;flex-direction: column;justify-content: center;">
|
|
|
- <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">热视频排名</div>
|
|
|
- <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">HOT VIDEO RANKING</div>
|
|
|
+ <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
|
|
|
+ 热视频排名
|
|
|
+ </div>
|
|
|
+ <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
|
|
|
+ HOT VIDEO RANKING
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex;">
|
|
|
- <div v-if="videosData.videos_two[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_two[3])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_two[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_two[3])"
|
|
|
+ >
|
|
|
<div class="cornerMark" style="background-color: #ff8d7a;">
|
|
|
- 4</div>
|
|
|
- <el-image :src="videosData.videos_two[3].as_img"
|
|
|
- style="border-radius: 12px;width: 290px;height: 188px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_two[0].as_title }}</div>
|
|
|
+ 4
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_two[3].as_img"
|
|
|
+ style="border-radius: 12px;width: 290px;height: 188px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_two[0].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_two[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_two[4])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_two[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_two[4])"
|
|
|
+ >
|
|
|
<div class="cornerMark" style="background-color: #ff8d7a;">
|
|
|
- 5</div>
|
|
|
- <el-image :src="videosData.videos_two[4].as_img"
|
|
|
- style="border-radius: 12px;width: 290px;height: 188px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_two[0].as_title }}</div>
|
|
|
+ 5
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_two[4].as_img"
|
|
|
+ style="border-radius: 12px;width: 290px;height: 188px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_two[0].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -162,95 +243,171 @@ function goDetail(item) {
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
|
|
|
- <img src="../../../assets/divider.png" style="width: 1200px;" />
|
|
|
+ <img src="../../../assets/divider.png" style="width: 1200px;">
|
|
|
</div>
|
|
|
<div style="width: 1200px;margin: auto;display: flex;">
|
|
|
- <div v-if="videosData.videos_three[0]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_three[0])">
|
|
|
- <img src="../../../assets/champion.png" class="cornerMarkImg" />
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_three[0]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_three[0])"
|
|
|
+ >
|
|
|
+ <img src="../../../assets/champion.png" class="cornerMarkImg">
|
|
|
<div class="cornerMark" style="background-color: #f2dc8c;margin-top: -3px;">
|
|
|
- 1</div>
|
|
|
- <el-image :src="videosData.videos_three[0].as_img"
|
|
|
- style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_three[0].as_title }}</div>
|
|
|
+ 1
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_three[0].as_img"
|
|
|
+ style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_three[0].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_three[1]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_three[1])">
|
|
|
- <img src="../../../assets/secondWinner.png" class="cornerMarkImg" />
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_three[1]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_three[1])"
|
|
|
+ >
|
|
|
+ <img src="../../../assets/secondWinner.png" class="cornerMarkImg">
|
|
|
<div class="cornerMark" style="background-color: #d7d8d8;margin-top: -3px;">
|
|
|
- 2</div>
|
|
|
- <el-image :src="videosData.videos_three[1].as_img"
|
|
|
- style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_three[1].as_title }}</div>
|
|
|
+ 2
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_three[1].as_img"
|
|
|
+ style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_three[1].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_three[2]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_three[2])">
|
|
|
- <img src="../../../assets/thirdWinner.png" class="cornerMarkImg" />
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_three[2]" style="width: 400px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_three[2])"
|
|
|
+ >
|
|
|
+ <img src="../../../assets/thirdWinner.png" class="cornerMarkImg">
|
|
|
<div class="cornerMark" style="background-color: #ff4f32;margin-top: -3px;">
|
|
|
- 3</div>
|
|
|
- <el-image :src="videosData.videos_three[2].as_img"
|
|
|
- style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_three[2].as_title }}</div>
|
|
|
+ 3
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_three[2].as_img"
|
|
|
+ style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_three[2].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="width: 1200px;margin:auto;display: flex;margin-top: 30px;">
|
|
|
- <div v-if="videosData.videos_three[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_three[3])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_three[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_three[3])"
|
|
|
+ >
|
|
|
<div class="cornerMark" style="background-color: #ff8d7a;">
|
|
|
- 4</div>
|
|
|
- <el-image :src="videosData.videos_three[3].as_img"
|
|
|
- style="width: 290px;height: 188px;border-radius: 12px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_three[0].as_title }}</div>
|
|
|
+ 4
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_three[3].as_img"
|
|
|
+ style="width: 290px;height: 188px;border-radius: 12px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_three[0].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="videosData.videos_three[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
- @click="goDetail(videosData.videos_three[4])">
|
|
|
+ <div
|
|
|
+ v-if="videosData.videos_three[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
|
|
|
+ @click="goDetail(videosData.videos_three[4])"
|
|
|
+ >
|
|
|
<div class="cornerMark" style="background-color: #ff8d7a;">
|
|
|
- 5</div>
|
|
|
- <el-image :src="videosData.videos_three[4].as_img"
|
|
|
- style="width: 290px;height: 188px;border-radius: 12px;margin-top: -40px;" />
|
|
|
- <div style="font-size: 15px;font-weight: Medium;">{{ videosData.videos_three[0].as_title }}</div>
|
|
|
+ 5
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="videosData.videos_three[4].as_img"
|
|
|
+ style="width: 290px;height: 188px;border-radius: 12px;margin-top: -40px;"
|
|
|
+ />
|
|
|
+ <div style="font-size: 15px;font-weight: Medium;">
|
|
|
+ {{ videosData.videos_three[0].as_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div style="background-color: #9f93cd;height: 220px;width: 600px;display: flex;justify-content: flex-end;">
|
|
|
<div style="width: 600px;height: 220px;display: flex;flex-direction: column;justify-content: center;">
|
|
|
- <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">点赞量火爆视频</div>
|
|
|
- <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">POPULAR</div>
|
|
|
- <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">LIKES VIDEOS</div>
|
|
|
+ <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
|
|
|
+ 点赞量火爆视频
|
|
|
+ </div>
|
|
|
+ <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
|
|
|
+ POPULAR
|
|
|
+ </div>
|
|
|
+ <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
|
|
|
+ LIKES VIDEOS
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bg">
|
|
|
<div style="width: 1200px;margin: auto;display: flex;align-items: center;height: 100%;display: flex;">
|
|
|
<div
|
|
|
- style="background-color:rgba(119,110,151,0.5);border-radius: 10px;width: 290px;height: 335px;display: flex;flex-direction: column;justify-content: center;">
|
|
|
- <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">博智AI慕课</div>
|
|
|
- <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">优势</div>
|
|
|
- <div style="color: #c5c3da;font-size: 33px;font-weight: bold;text-align: center;">BOZHI AI MUKE</div>
|
|
|
- <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">Advantages</div>
|
|
|
+ style="background-color:rgba(119,110,151,0.5);border-radius: 10px;width: 290px;height: 335px;display: flex;flex-direction: column;justify-content: center;"
|
|
|
+ >
|
|
|
+ <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
|
|
|
+ 博智AI慕课
|
|
|
+ </div>
|
|
|
+ <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
|
|
|
+ 优势
|
|
|
+ </div>
|
|
|
+ <div style="color: #c5c3da;font-size: 33px;font-weight: bold;text-align: center;">
|
|
|
+ BOZHI AI MUKE
|
|
|
+ </div>
|
|
|
+ <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
|
|
|
+ Advantages
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div style="width: 910px;display: flex;justify-content: space-around;">
|
|
|
<div>
|
|
|
- <div style="display: flex;justify-content: center;"><img src="../../../assets/icon1.png" /></div>
|
|
|
- <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">AI驱动</div>
|
|
|
- <div style="font-size: 18px;color:white;text-align: center;">支持数字人实时渲染</div>
|
|
|
- <div style="font-size: 18px;color:white;text-align: center;">提供PaaS技术支持底座</div>
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <img src="../../../assets/icon1.png">
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">
|
|
|
+ AI驱动
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 18px;color:white;text-align: center;">
|
|
|
+ 支持数字人实时渲染
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 18px;color:white;text-align: center;">
|
|
|
+ 提供PaaS技术支持底座
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div style="display: flex;justify-content: center;"><img src="../../../assets/icon2.png" /></div>
|
|
|
- <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">智能生产制作</div>
|
|
|
- <div style="font-size: 18px;color:white;text-align: center;">支持云剪辑视频与资源文件</div>
|
|
|
- <div style="font-size: 18px;color:white;text-align: center;">提供剪辑合成、特效与生产</div>
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <img src="../../../assets/icon2.png">
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">
|
|
|
+ 智能生产制作
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 18px;color:white;text-align: center;">
|
|
|
+ 支持云剪辑视频与资源文件
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 18px;color:white;text-align: center;">
|
|
|
+ 提供剪辑合成、特效与生产
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div style="display: flex;justify-content: center;"><img src="../../../assets/icon3.png" /></div>
|
|
|
- <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">成本和效率</div>
|
|
|
- <div style="font-size: 18px;color:white;text-align: center;">相比真人出镜更灵活高效</div>
|
|
|
- <div style="font-size: 18px;color:white;text-align: center;">大大节省制作成本和时间</div>
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <img src="../../../assets/icon3.png">
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">
|
|
|
+ 成本和效率
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 18px;color:white;text-align: center;">
|
|
|
+ 相比真人出镜更灵活高效
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 18px;color:white;text-align: center;">
|
|
|
+ 大大节省制作成本和时间
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <chat-bot />
|
|
|
</template>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
.bg {
|
|
|
margin-top: 70px;
|
zhuf
