|
|
@@ -0,0 +1,611 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="Bilibili视频检索"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="660px"
|
|
|
+ :before-close="handleClose"
|
|
|
+ class="dialog_diy bilibili-search-dialog"
|
|
|
+ >
|
|
|
+ <div style="box-sizing:border-box;padding:15px" v-loading="loading" element-loading-text="正在检索中，请稍等...">
|
|
|
+ <!-- 搜索和筛选区域 -->
|
|
|
+ <div class="search-filter-box">
|
|
|
+ <div class="search-item">
|
|
|
+ <div class="search-input-wrapper">
|
|
|
+ <el-input
|
|
|
+ class="inputC"
|
|
|
+ placeholder="搜索视频关键字（如需搜索多个可,隔开）"
|
|
|
+ v-model="searchKeyword"
|
|
|
+ @keyup.enter.native="handleSearch"
|
|
|
+ ></el-input>
|
|
|
+ <div class="search_img" @click="handleSearch">
|
|
|
+ <img src="../../../../assets/icon/search.png" alt />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter-item">
|
|
|
+ <el-select v-model="navActive" @change="navClick" placeholder="综合排序" class="sort-select">
|
|
|
+ <el-option label="综合排序" :value="0"></el-option>
|
|
|
+ <el-option label="最多播放" :value="1"></el-option>
|
|
|
+ <el-option label="最新发布" :value="2"></el-option>
|
|
|
+ <el-option label="最多弹幕" :value="3"></el-option>
|
|
|
+ <el-option label="最多收藏" :value="4"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="add-item">
|
|
|
+ <el-button type="primary" @click="batchAdd" :disabled="selectedVideos.length === 0">加入</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 视频列表 -->
|
|
|
+ <div class="Box">
|
|
|
+ <div
|
|
|
+ class="video_box video_box2"
|
|
|
+ :class="{ 'selected': isVideoSelected(item) }"
|
|
|
+ v-for="(item, index) in paginatedData"
|
|
|
+ :key="index"
|
|
|
+ @click="toggleVideoSelection(item)"
|
|
|
+ >
|
|
|
+ <div class="video-checkbox" @click.stop>
|
|
|
+ <el-checkbox
|
|
|
+ :value="isVideoSelected(item)"
|
|
|
+ @change="toggleVideoSelection(item)"
|
|
|
+ ></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <span class="name" v-html="item.title"></span>
|
|
|
+ <span class="detail">{{ item.description || '' }}</span>
|
|
|
+ <div class="video-info">
|
|
|
+ <span class="author">作者:{{ item.author || '' }}</span>
|
|
|
+ <span class="duration">时长:{{ item.duration || '' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="tag" v-if="item.tag && typeof item.tag === 'string' && item.tag.split(',').length > 0">
|
|
|
+ <el-tooltip :content="tag" placement="top" effect="dark" v-for="(tag, index) in item.tag.split(',').slice(0, 5)" :key="index">
|
|
|
+ <span>{{ tag }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="external-link" @click.stop="openUrl(item.bvid)" title="查看">
|
|
|
+ <svg t="1755224440400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4991" width="16" height="16">
|
|
|
+ <path d="M853.333 469.333a42.667 42.667 0 0 0-42.666 42.667v256a42.667 42.667 0 0 1-42.667 42.667H256a42.667 42.667 0 0 1-42.667-42.667V256a42.667 42.667 0 0 1 42.667-42.667h256a42.667 42.667 0 0 0 0-85.333H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" fill="#909399" p-id="4992"></path>
|
|
|
+ <path d="M682.667 213.333h270.933v270.933a42.667 42.667 0 1 0 85.334 0V170.667a42.667 42.667 0 0 0-42.667-42.667H682.667a42.667 42.667 0 0 0 0 85.333z" fill="#909399" p-id="4993"></path>
|
|
|
+ <path d="M894.293 174.293a42.667 42.667 0 0 0-60.586 0L591.147 417.707a42.667 42.667 0 0 0 60.586 60.586L894.293 234.88a42.667 42.667 0 0 0 0-60.587z" fill="#909399" p-id="4994"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.length == 0" class="no_data">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ <!-- 分页控件 -->
|
|
|
+ <div class="pagination-box" v-if="data.length > 0">
|
|
|
+ <el-button
|
|
|
+ :disabled="currentPage === 1"
|
|
|
+ @click="prevPage"
|
|
|
+ size="small"
|
|
|
+ >←上一页</el-button>
|
|
|
+ <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
|
|
|
+ <el-button
|
|
|
+ :disabled="currentPage >= totalPages"
|
|
|
+ @click="nextPage"
|
|
|
+ size="small"
|
|
|
+ >下一页→</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="handleClose">关 闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import _ from "lodash";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "BilibiliSearchDialog",
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ courseName: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ grade: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ searchKeyword: "",
|
|
|
+ loading: false,
|
|
|
+ data: [],
|
|
|
+ navActive: 0,
|
|
|
+ selectedVideos: [], // 选中的视频列表
|
|
|
+ currentPage: 1, // 当前页码
|
|
|
+ pageSize: 20, // 每页显示数量
|
|
|
+ totalPages: 1 // 总页数
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible(newVal) {
|
|
|
+ this.dialogVisible = newVal;
|
|
|
+ if (newVal) {
|
|
|
+ this.initDialog();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dialogVisible(newVal) {
|
|
|
+ this.$emit('update:visible', newVal);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.selectedVideos = [];
|
|
|
+ this.searchKeyword = "";
|
|
|
+ this.data = [];
|
|
|
+ this.currentPage = 1;
|
|
|
+ },
|
|
|
+ initDialog() {
|
|
|
+ this.selectedVideos = [];
|
|
|
+ // 默认以课程标题和已选择的年级为关键词
|
|
|
+ let keywords = [];
|
|
|
+ if (this.courseName) {
|
|
|
+ keywords.push(this.courseName);
|
|
|
+ }
|
|
|
+ if (this.grade) {
|
|
|
+ // 如果grade是多个年级用逗号分隔的，也需要处理
|
|
|
+ keywords.push(this.grade);
|
|
|
+ }
|
|
|
+ this.searchKeyword = keywords.join('，');
|
|
|
+ this.data = [];
|
|
|
+ this.currentPage = 1;
|
|
|
+ if (this.searchKeyword) {
|
|
|
+ this.handleSearch();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 搜索视频
|
|
|
+ async handleSearch() {
|
|
|
+ if (!this.searchKeyword) {
|
|
|
+ this.$message.error("请输入关键字");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ let keywords = [];
|
|
|
+ if (this.searchKeyword.split("，").length > 1) {
|
|
|
+ keywords = this.searchKeyword.split("，");
|
|
|
+ } else {
|
|
|
+ keywords = this.searchKeyword.split(",");
|
|
|
+ }
|
|
|
+ this.data = [];
|
|
|
+ let data2 = [];
|
|
|
+ for (var a = 0; a < keywords.length; a++) {
|
|
|
+ let _data = await this.searchBilibili(keywords[a]);
|
|
|
+ data2[a] = _data;
|
|
|
+ }
|
|
|
+ this.data = _.flatMap(_.zip(...data2), (pair) => pair.filter(value => value !== undefined));
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.updateTotalPages();
|
|
|
+ this.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.error("搜索失败，请重试");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // Bilibili搜索接口
|
|
|
+ searchBilibili(keyword) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.ajax.post(`https://gpt4.cocorobo.cn/get_network_search`, {
|
|
|
+ engine: "bilibiliNew",
|
|
|
+ keyword: keyword,
|
|
|
+ page: 1,
|
|
|
+ page_size: 20,
|
|
|
+ order: this.navActive,
|
|
|
+ duration: 0,
|
|
|
+ }).then(response => {
|
|
|
+ console.log(response);
|
|
|
+ resolve(response.data.FunctionResponse || []);
|
|
|
+ }).catch((error) => {
|
|
|
+ console.log(error);
|
|
|
+ resolve([]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 切换排序方式
|
|
|
+ navClick(value) {
|
|
|
+ if (this.navActive == value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.navActive = value;
|
|
|
+ if (this.searchKeyword) {
|
|
|
+ this.handleSearch();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 打开视频链接
|
|
|
+ openUrl(bvid) {
|
|
|
+ window.open(`//www.bilibili.com/video/${bvid}`);
|
|
|
+ },
|
|
|
+ // 添加单个视频
|
|
|
+ addSingleVideo(item) {
|
|
|
+ const videoTitle = item.title.replace(/<[^>]*>?/gm, ''); // 移除HTML标签
|
|
|
+ const videoData = {
|
|
|
+ name: "链接",
|
|
|
+ title: item.title.replace(/<[^>]*>?/gm, ''),
|
|
|
+ url: `//player.bilibili.com/player.html?isOutside=true&bvid=${item.bvid}`,
|
|
|
+ id: new Date().getTime(),
|
|
|
+ bvid: item.bvid,
|
|
|
+ type: 75 // B站视频使用type 75
|
|
|
+ };
|
|
|
+ this.$emit('addVideo', videoData);
|
|
|
+ this.$message.success('加入成功');
|
|
|
+ // 添加成功后关闭弹窗
|
|
|
+ this.handleClose();
|
|
|
+ },
|
|
|
+ // 检查视频是否被选中
|
|
|
+ isVideoSelected(item) {
|
|
|
+ return this.selectedVideos.some(v => v.bvid === item.bvid);
|
|
|
+ },
|
|
|
+ // 切换视频选择状态
|
|
|
+ toggleVideoSelection(item) {
|
|
|
+ const index = this.selectedVideos.findIndex(v => v.bvid === item.bvid);
|
|
|
+ if (index > -1) {
|
|
|
+ this.selectedVideos.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ this.selectedVideos.push(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 批量添加选中的视频
|
|
|
+ batchAdd() {
|
|
|
+ if (this.selectedVideos.length === 0) {
|
|
|
+ this.$message.warning('请先选择要添加的视频');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectedVideos.forEach(video => {
|
|
|
+ const videoTitle = video.title.replace(/<[^>]*>?/gm, ''); // 移除HTML标签
|
|
|
+ const videoData = {
|
|
|
+ name: "链接",
|
|
|
+ title: video.title.replace(/<[^>]*>?/gm, ''),
|
|
|
+ url: `//player.bilibili.com/player.html?isOutside=true&bvid=${video.bvid}`,
|
|
|
+ id: new Date().getTime(),
|
|
|
+ bvid: video.bvid,
|
|
|
+ type: 75 // B站视频使用type 75
|
|
|
+ };
|
|
|
+ this.$emit('addVideo', videoData);
|
|
|
+ });
|
|
|
+ this.$message.success(`成功添加 ${this.selectedVideos.length} 个视频`);
|
|
|
+ this.selectedVideos = [];
|
|
|
+ // 批量添加成功后关闭弹窗
|
|
|
+ this.handleClose();
|
|
|
+ },
|
|
|
+ // 清空选择
|
|
|
+ clearSelection() {
|
|
|
+ this.selectedVideos = [];
|
|
|
+ },
|
|
|
+ // 更新总页数
|
|
|
+ updateTotalPages() {
|
|
|
+ this.totalPages = Math.ceil(this.data.length / this.pageSize);
|
|
|
+ },
|
|
|
+ // 上一页
|
|
|
+ prevPage() {
|
|
|
+ if (this.currentPage > 1) {
|
|
|
+ this.currentPage--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 下一页
|
|
|
+ nextPage() {
|
|
|
+ if (this.currentPage < this.totalPages) {
|
|
|
+ this.currentPage++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 获取当前页的数据
|
|
|
+ paginatedData() {
|
|
|
+ const start = (this.currentPage - 1) * this.pageSize;
|
|
|
+ const end = start + this.pageSize;
|
|
|
+ return this.data.slice(start, end);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.dialog_diy>>>.el-dialog {
|
|
|
+ height: auto;
|
|
|
+ margin: 50px auto 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__header {
|
|
|
+ background: #454545 !important;
|
|
|
+ padding: 15px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__body {
|
|
|
+ height: calc(100% - 124px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn {
|
|
|
+ top: 19px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__body,
|
|
|
+.dialog_diy>>>.el-dialog__footer {
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索和筛选区域 */
|
|
|
+.search-filter-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.search-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-label {
|
|
|
+ min-width: 80px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.inputC>>>.el-input__inner {
|
|
|
+ padding-right: 35px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.search_img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.search_img>img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-item {
|
|
|
+ width: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-select {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.add-item {
|
|
|
+ width: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.Box {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box {
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box2 {
|
|
|
+ box-shadow: 0px 0px 4px 2px #d2d2d282;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ border: 2px solid transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box2:hover {
|
|
|
+ box-shadow: 0px 0px 8px 4px #d2d2d282;
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+.video_box2.selected {
|
|
|
+ border: 2px solid #409eff;
|
|
|
+ /* box-shadow: 0px 0px 8px 4px rgba(64, 158, 255, 0.3); */
|
|
|
+}
|
|
|
+
|
|
|
+.video-checkbox {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ z-index: 10;
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ padding: 2px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-thumbnail {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box>.detail {
|
|
|
+ color: #cecece;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ line-clamp: 3;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 0 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box>.name {
|
|
|
+ color: #000;
|
|
|
+ margin: 5px 0 8px 0;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ min-height: 22px;
|
|
|
+ max-height: 44px;
|
|
|
+ line-height: 22px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: block;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ /* 强制换行成两行，如果内容过多则省略号，且不会折成一行 */
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+}
|
|
|
+
|
|
|
+.video-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box>.author {
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.video-info .duration {
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box>.tag {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ margin-top: auto;
|
|
|
+ width: calc(100% - 24px);
|
|
|
+}
|
|
|
+
|
|
|
+.video_box>.tag>span {
|
|
|
+ background: #eef3fb;
|
|
|
+ color: #0061ff;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 15px;
|
|
|
+ font-size: 0.9em;
|
|
|
+ margin: 0 5px 0 0;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.external-link {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 10px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: background 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.external-link:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.external-link svg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.no_data {
|
|
|
+ height: 500px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20px 0;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-info {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+@media screen and (max-width: 1080px) {
|
|
|
+ .video_box {
|
|
|
+ width: calc(100% / 3 - 10px) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 760px) {
|
|
|
+ .video_box {
|
|
|
+ width: calc(100% / 2 - 10px) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
