Skip to content

N
national_museum_vod
Commit b10474b7 authored by 乐宝呗666's avatar 乐宝呗666
Browse files
Options

添加内容互动页面

parent 384a20b6
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 3 deletions
src/config/menu.js
View file @ b10474b7
...@@ -23,7 +23,7 @@ export const menuList = [ ...@@ -23,7 +23,7 @@ export const menuList = [
subtitle:'学习内容及互动管理', subtitle:'学习内容及互动管理',
subMenu:[ subMenu:[
{label:'学习内容管理', imgUrl:'',url:'/learn'}, {label:'学习内容管理', imgUrl:'',url:'/learn'},
{label:'互动管理', imgUrl:'',url:''} {label:'互动管理', imgUrl:'',url:'/interactive'}
] ]
}, },
] ]
......
src/page/STB/base/index.vue
View file @ b10474b7
...@@ -44,10 +44,10 @@ ...@@ -44,10 +44,10 @@
<div class="party-table"> <div class="party-table">
<el-table border style="width: 100%;height:100%" height="100%" :data="list"> <el-table border style="width: 100%;height:100%" height="100%" :data="list">
<el-table-column type="index" width="120" label="序号"></el-table-column> <el-table-column type="index" width="120" label="序号"></el-table-column>
<el-table-column label="机顶盒名称" prop="name"></el-table-column> <el-table-column label="机顶盒用户名" prop="name"></el-table-column>
<el-table-column label="所属单位" prop="unit"></el-table-column> <el-table-column label="所属单位" prop="unit"></el-table-column>
<el-table-column label="账号状态" prop="state"></el-table-column> <el-table-column label="账号状态" prop="state"></el-table-column>
<el-table-column label="mac地址" prop="macUrl"></el-table-column> <el-table-column label="MAC地址" prop="macUrl"></el-table-column>
<el-table-column label="操作" header-align="center" align="center"> <el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220"> <template slot-scope="scope" width="220">
<el-button-group> <el-button-group>
......
src/page/content/interactive/index.vue 0 → 100644
View file @ b10474b7
<template>
<div class="interactive-wrapper height100">
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可按照账号状态及所属单位进行信息筛选。可新增机顶盒账号，“*”为必填项。请先创建单位管理员账号，否则机顶盒无法激活</span>
</div>
<el-row :gutter="16" style="margin-left:0;margin-right:0;height:calc(100% - 41px);">
<el-col :span="6" class="height100">
<el-card class="height100">
<div class="tree-title">组织机构</div>
<div class="tree-body">
<el-input suffix-icon="el-icon-search" placeholder="请输入组织结构名称" v-model="filterText"></el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
/>
</div>
</el-card>
</el-col>
<el-col :span="18" class="height100">
<el-card class="height100">
<div class="content-title">“北京市政府”展板互动信息汇总</div>
<div class="content-item" v-for="(item,index) in list" :key="index">
<h5 class="title">{{item.title}}</h5>
<p>{{item.content}}</p>
<div class="img-box">
<img src="@/assets/audio-icon.png" alt="">
<img src="@/assets/audio-icon.png" alt="">
<img src="@/assets/video-icon.png" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic139.nipic.com%2Ffile%2F20170825%2F24044964_112347917039_2.jpg&refer=http%3A%2F%2Fpic139.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616393684&t=43405cf2c33d8addc98e0909da78f359" alt="">
</div>
<div class="author">
<div>{{item.author}}</div>
<div>{{item.time}}</div>
</div>
</div>
<party-pagination style="margin:0 20px;"/>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { partyPagination } from '@/components/index'
export default {
components:{ partyPagination},
data() {
return {
filterText: "",
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1"
},
{
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
list: [
{
title: "建党百年，爱国主义教育",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.",
author: "邢潇潇",
files:['@/assets/audio-icon.png','@/assets/video-icon.png','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic139.nipic.com%2Ffile%2F20170825%2F24044964_112347917039_2.jpg&refer=http%3A%2F%2Fpic139.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616393684&t=43405cf2c33d8addc98e0909da78f359'],
macUrl: "2021/01/02 14:34:22"
},
{
title: "建党百年，爱国主义教育",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.",
author: "邢潇潇",
files:['@/assets/audio-icon.png','@/assets/video-icon.png','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic139.nipic.com%2Ffile%2F20170825%2F24044964_112347917039_2.jpg&refer=http%3A%2F%2Fpic139.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616393684&t=43405cf2c33d8addc98e0909da78f359'],
macUrl: "2021/01/02 14:34:22"
},
]
};
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
}
};
</script>
<style lang="less">
.interactive-wrapper {
.page-tip {
padding: 10px;
}
.el-card__body {
padding: 0;
}
.tree-title {
font-size: 16px;
color: #fff;
text-align: center;
height: 56px;
line-height: 56px;
background: #9B1E23;
border-radius: 8px 8px 0 0;
}
.tree-body {
padding: 20px;
.el-input__inner {
background: #F8F8F8;
border-radius: 22px;
}
.el-input__icon {
font-size: 18px;
color: #AC9374;
}
.el-tree-node__content:hover {
border-radius: 20px;
}
.el-tree-node__content {
height:30px;
margin: 5px 0;
}
}
.content-title {
font-size: 20px;
color: #333;
padding: 20px;
border-bottom: 1px solid #eee;
}
.content-item {
font-size: 16px;
margin: 20px;
padding: 40px;
background: #f8f8f8;
.title {
padding-bottom: 20px;
}
p {
padding-bottom: 20px;
border-bottom: 1px solid #bbb;
}
.img-box {
padding: 20px;
border-bottom: 1px solid #bbb;
img {
width: 90px;
height: 90px;
margin-right: 20px;
}
}
.author {
display: flex;
justify-content: space-between;
padding-top: 16px;
font-size: 14px;
}
}
}
</style>
\ No newline at end of file
src/router/index.js
View file @ b10474b7
...@@ -521,6 +521,15 @@ const router = new Router({ ...@@ -521,6 +521,15 @@ const router = new Router({
title:'机顶盒运维信息管理', title:'机顶盒运维信息管理',
} }
}, },
{
path: '/interactive',
name: '互动内容',
component: () => import('@/page/content/interactive/index'),
meta:{
showBreadcrumb:true,
title:'互动内容',
}
},
//=======================================机顶盒管理 end ===================================// //=======================================机顶盒管理 end ===================================//
] ]
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment