|
|
|
|
@ -1,8 +1,216 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div></div>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<div class="tab-list">
|
|
|
|
|
<div
|
|
|
|
|
class="tab-item"
|
|
|
|
|
v-for="(dict, index) in jc_item_type"
|
|
|
|
|
:key="dict.value"
|
|
|
|
|
:style="activeStyle(index)"
|
|
|
|
|
@click="changeIndex(dict, index)"
|
|
|
|
|
>
|
|
|
|
|
{{ dict.label }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line-item"></div>
|
|
|
|
|
<div class="list-container" v-loading="loading">
|
|
|
|
|
<div class="list-item" v-for="item in list" :key="item.id">
|
|
|
|
|
<div class="item-title-row" :style="{ backgroundColor: theme }">
|
|
|
|
|
<div class="title">{{ item.title }}</div>
|
|
|
|
|
<div class="item-tags">
|
|
|
|
|
<el-tag type="primary" v-for="tags in item.technology" :key="tags">
|
|
|
|
|
<dict-tag :options="jc_technology" :value="tags" />
|
|
|
|
|
</el-tag>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-block">
|
|
|
|
|
<div
|
|
|
|
|
class="block-item"
|
|
|
|
|
v-for="blockItem in item.itemJson"
|
|
|
|
|
:key="blockItem.id"
|
|
|
|
|
@click="goLink(blockItem.link)"
|
|
|
|
|
>
|
|
|
|
|
<img :src="baseUrl + blockItem.cover" alt="" />
|
|
|
|
|
<div class="video-icon">
|
|
|
|
|
<div class="port-type">{{ blockItem.name }}</div>
|
|
|
|
|
<el-link
|
|
|
|
|
type="primary"
|
|
|
|
|
@click.stop="goLink(baseUrl + blockItem.video)"
|
|
|
|
|
target="_blank"
|
|
|
|
|
>视频链接</el-link
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="user-pass" v-for="user in blockItem.userData">
|
|
|
|
|
<span>用户名:{{ user.userName }}</span>
|
|
|
|
|
<span>密码:{{ user.passWord }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="list.length == 0" class="no-data">
|
|
|
|
|
<el-empty description="无数据" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
|
|
import useSettingsStore from "@/store/modules/settings";
|
|
|
|
|
import { getList, getInfo } from "@/api/jichuang/model.js";
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
|
|
const { jc_technology, jc_item_type, sys_yes_no } = proxy.useDict(
|
|
|
|
|
"jc_item_type",
|
|
|
|
|
"jc_technology",
|
|
|
|
|
"sys_yes_no"
|
|
|
|
|
);
|
|
|
|
|
const loading = ref(true);
|
|
|
|
|
let currentIndex = ref(0);
|
|
|
|
|
let list = ref([]);
|
|
|
|
|
let queryParams = ref({
|
|
|
|
|
itemType: 1,
|
|
|
|
|
});
|
|
|
|
|
const theme = computed(() => useSettingsStore().theme);
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getListData();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const changeIndex = (item, index) => {
|
|
|
|
|
if (currentIndex.value == index) return;
|
|
|
|
|
queryParams.value.itemType = item.value;
|
|
|
|
|
currentIndex.value = index;
|
|
|
|
|
getListData();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const goLink = (url) => {
|
|
|
|
|
window.open(url);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getListData = async () => {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
const response = await getList(queryParams.value);
|
|
|
|
|
list.value = response.rows.map((item) => {
|
|
|
|
|
item.technology = item.technology.split(",");
|
|
|
|
|
item.itemJson = JSON.parse(item.itemJson);
|
|
|
|
|
return item;
|
|
|
|
|
});
|
|
|
|
|
loading.value = false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const activeStyle = (index) => {
|
|
|
|
|
if (currentIndex.value == index) {
|
|
|
|
|
return {
|
|
|
|
|
"background-color": theme.value,
|
|
|
|
|
"border-color": theme.value,
|
|
|
|
|
color: "#fff",
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss"></style>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.app-container {
|
|
|
|
|
height: calc(100vh - 84px);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
& > div {
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
.tab-list {
|
|
|
|
|
.tab-item {
|
|
|
|
|
border: 1px solid #d8dce5;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
padding: 6px 8px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
& > .tab-item:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line-item {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 1px;
|
|
|
|
|
border-left: 1px solid #e6e6e6;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
.list-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
.no-data {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.list-item {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
.item-title-row {
|
|
|
|
|
padding: 6px 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.item-tags span {
|
|
|
|
|
margin-left: 6px;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.item-block {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(
|
|
|
|
|
5,
|
|
|
|
|
1fr
|
|
|
|
|
); /* 定义四列，每列宽度相等，占可用空间的1/4 */
|
|
|
|
|
grid-gap: 25px; /* 设置网格元素之间的行间距和列间距均为10px */
|
|
|
|
|
.block-item {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
border: 1px solid #e6e6e6;
|
|
|
|
|
box-shadow: 0px 5px 10px 0px #dadeeb;
|
|
|
|
|
& > div {
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
}
|
|
|
|
|
.video-icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 150px;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
}
|
|
|
|
|
.port-type {
|
|
|
|
|
font-weight: 550;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
.user-pass {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
& > .list-item:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
