ai_mooc/src/pages/frontpage/homePage/index.vue

<script setup>
let videosData = $ref({
  videos_one: [],
  videos_two: [],
  videos_three: [],
})
request({
  baseURL: window.GLOBAL_CONFIG.api,
  url: '/aimooc/spjj/main',
}).then((res) => {
  videosData = res.data
})

const router = useRouter()
function viewMore() {
  router.push('/frontpage/viewMore')
}

function goDetail(item) {
  router.push({
    path: '/frontpage/videoDetail',
    query: {
      as_id: item.as_id,
    },
  })
}
</script>

<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 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;">
    </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]" 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]" 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]" 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>
      </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])"
        >
          <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>
        <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>
        <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>
        <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>
      </div>
    </div>
  </div>

  <div style="height: 600px;">
    <div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
      <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 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>
        </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 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>
        </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 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>
        </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;"
        >
          <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>
        </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 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>
          </div>
          <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>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
      <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 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>
      </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 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>
      </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 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>
      </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 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>
      </div>
      <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>
      </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>
      </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>
        </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>
          <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>
        </div>
      </div>
    </div>
  </div>
  <chat-bot />
</template>

<style lang="scss" scoped>
.bg {
  margin-top: 70px;
  background-image: url('../../../assets/homepageBg.png');
  width: 100%;
  height: calc(100vw * 0.264);
}

.cornerMarkImg {
  position: relative;
  z-index: 1000;
  width: 50px;
  height: 30px;
  margin-top: -22px;
}

.cornerMark {
  position: relative;
  z-index: 999;
  color: white;
  font-weight: bold;
  font-size: 24px;
  width: 50px;
  height: 40px;
  border-radius: 12px 0;
  line-height: 40px;
  text-align: center;
}
</style>