视频开发

src/modules/resource/dashboard/components/Hottest.vue

+<script setup lang="ts"></script>
+<template>
+  <div></div>
+</template>
+<style lang="scss"></style>
\ No newline at end of file

src/modules/resource/dashboard/components/Newest.vue

+<script setup lang="ts"></script>
+<template>
+  <div></div>
+</template>
+<style lang="scss"></style>
\ No newline at end of file

src/modules/resource/dashboard/components/RecentLearning.vue

+<script setup lang="ts"></script>
+<template>
+  <div></div>
+</template>
+<style lang="scss"></style>
\ No newline at end of file

src/modules/resource/dashboard/components/Statistics.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="statistics-list">
+    <div class="item"></div>
+  </div>
+</template>
+<style lang="scss">
+.statistics-list{
+  display: flex;
+  .item{
+    width: 110px;
+    height: 140px;
+    border: 1px solid #E5E5E5;
+    border-radius: 6px;
+    box-sizing: border-box;
+  }
+}
+</style>
\ No newline at end of file

src/modules/resource/dashboard/views/Index.vue

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Statistics from '../components/Statistics.vue'
+import Newest from '../components/Newest.vue'
+import Hottest from '../components/Hottest.vue'
+import RecentLearning from '../components/RecentLearning.vue'
+</script>
 <template>
-  <AppCard title="资源统计"></AppCard>
-  <AppCard title="最新资源"></AppCard>
-  <AppCard title="最热资源"></AppCard>
-  <AppCard title="最近学习"></AppCard>
+  <AppCard title="资源统计">
+    <Statistics></Statistics>
+  </AppCard>
+  <AppCard title="最新资源">
+    <Newest></Newest>
+  </AppCard>
+  <AppCard title="最热资源">
+    <Hottest></Hottest>
+  </AppCard>
+  <AppCard title="最近学习">
+    <RecentLearning></RecentLearning>
+  </AppCard>
 </template>

src/modules/resource/video/components/CardListItem.vue

+<script setup lang="ts">
+// const props = defineProps<{ data: object }>()
+</script>
+<template>
+  <!-- <div>{{ props.data }}</div> -->
+  <div class="card-item">
+    <div class="card-item-top">
+      <div class="title">基金产品(中)(初级）</div>
+      <img src="http://iph.href.lu/265x170" />
+      <div class="tool-pop-btn">
+        <div class="edit-btn">编辑</div>
+        <div class="view-btn">查看</div>
+      </div>
+    </div>
+    <div class="card-item-bottom">
+      <div class="item-t">
+        <div class="text">张三丰/紫荆教育</div>
+        <div class="tag green">失效</div>
+      </div>
+      <div class="item-b">
+        <div class="time">2022-03-21 12:34:21</div>
+        <div class="tag">新建</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.card-item {
+  width: 265px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  .card-item-top {
+    height: 170px;
+    position: relative;
+    &:hover {
+      .tool-pop-btn {
+        opacity: 1;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .title {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      line-height: 37px;
+      background: rgba(0, 0, 0, 0.4);
+      font-size: 18px;
+      color: #ffffff;
+      padding-left: 16px;
+      box-sizing: border-box;
+      overflow:hidden;
+      white-space:nowrap;
+      text-overflow:ellipsis;
+    }
+    .tool-pop-btn {
+      transition: all .5s;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.6);
+      opacity: 0;
+      .edit-btn{
+        width: 113px;
+        line-height: 32px;
+        border: 1px solid #D3D3D3;
+        border-radius: 18px;
+        text-align: center;
+        font-size: 14px;
+        color: #FFFFFF;
+        margin: 52px auto 12px;
+        cursor: pointer;
+      }
+      .view-btn{
+        width: 113px;
+        line-height: 32px;
+        background: #AA1941;
+        border-radius: 18px;
+        text-align: center;
+        font-size: 14px;
+        color: #FFFFFF;
+        margin: 0 auto;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.card-item-bottom{
+  background: #fff;
+  padding: 20px 16px 30px;
+  .item-t{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .text{
+      width: 150px;
+      font-size: 16px;
+      line-height: 100%;
+      color: #666666;
+      overflow:hidden;
+      white-space:nowrap;
+      text-overflow:ellipsis;
+    }
+    .tag{
+      width: 48px;
+      line-height: 22px;
+      background: #AA1941;
+      border-radius: 11px;
+      font-size: 14px;
+      color: #fff;
+      text-align: center;
+      &.green{
+        background: #1AB226;
+      }
+    }
+  }
+  .item-b{
+    margin-top: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .time{
+      font-size: 14px;
+      line-height: 100%;
+      color: #999999;
+    }
+    .tag{
+      font-size: 16px;
+      line-height: 100%;
+      color: #999999;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/modules/resource/video/views/List.vue

 <script setup lang="ts">
-import { getVideoList } from '../api'
+// import { getVideoList } from '../api'
+import CardListItem from '../components/CardListItem.vue'
+import { Expand, Search } from '@element-plus/icons-vue'
 
 const appList = ref()
 
-const isCard = ref(false)
+const isCard = ref(true)
 
 const listOptions = {
   remote: {
-    httpRequest: getVideoList,
+    // httpRequest: getVideoList,
     params: { type: '' },
     beforeRequest(params: any) {
       // params.type = 选项卡类型
@@ -17,16 +19,21 @@ const listOptions = {
   filters: [
     { type: 'select', prop: 'type', label: '状态' },
     { type: 'select', prop: 'project_id', label: '项目' },
-    { type: 'select', prop: 'category_id', label: '类别' }
+    { type: 'select', prop: 'category_id', label: '类别' },
+    { prop: 'search', slots: 'filter-search' }
+    // { type: 'input', prop: 'category_id', prefixIcon: 'Search' }
   ],
   columns: [
-    { label: '封面', slots: 'table-cover', width: 224 },
-    { label: 'ID', prop: 'id' },
-    { label: '标题', prop: 'course_name' },
-    { label: '类型', prop: 'type_name' },
-    { label: '浏览量', prop: 'pv' },
-    { label: '创建时间', prop: 'created_time' },
-    { label: '操作', slots: 'table-operate', width: 230, align: 'right' }
+    { label: '视频标题', prop: 'title' },
+    { label: '视频分类', prop: 'type' },
+    { label: '知识点', prop: 'zsd' },
+    { label: '封面', slots: 'table-cover', width: 100 },
+    { label: '资源状态', prop: 'state' },
+    { label: '审核状态', prop: 'state2' },
+    { label: '更新人', prop: 'update' },
+    { label: '更新人部门', prop: 'updatebm' },
+    { label: '更新日期', prop: 'update_time' },
+    { label: '操作', slots: 'table-operate', align: 'right' }
   ],
   data: [
     { id: 1, title: '视频标题', type: '视频分类' },
@@ -37,32 +44,64 @@ const listOptions = {
 
 <template>
   <AppCard>
-    <el-switch v-model="isCard"></el-switch>
-    <el-tabs>
-      <el-tab-pane label="个人资源"></el-tab-pane>
-      <el-tab-pane label="部门资源"></el-tab-pane>
-      <el-tab-pane label="公开资源"></el-tab-pane>
-    </el-tabs>
-    <router-link to="/resource/video/create">
-      <el-button type="primary" round>新建视频资源</el-button>
-    </router-link>
+    <!-- <el-switch v-model="isCard"></el-switch> -->
+    <div class="video-head">
+      <el-tabs>
+        <el-tab-pane label="个人资源"></el-tab-pane>
+        <el-tab-pane label="部门资源"></el-tab-pane>
+        <el-tab-pane label="公开资源"></el-tab-pane>
+      </el-tabs>
+      <el-icon class="video-head-icon" @click="isCard = !isCard"><Expand /></el-icon>
+    </div>
+    <div class="video-tool-btn">
+      <router-link to="/resource/video/create">
+        <el-button type="primary" round>新建视频资源</el-button>
+      </router-link>
+    </div>
     <AppList v-bind="listOptions" ref="appList">
-      <template #header-aside> </template>
+      <template #header-aside></template>
+      <template #filter-search="{ params }">
+        <el-input v-model="params.search" placeholder="搜索" :prefix-icon="Search" />
+      </template>
       <template #table-operate="{ row }">
         <el-space>
           <router-link :to="`/video/update/${row.id}`">
             <el-button plain>编辑</el-button>
           </router-link>
-          <!-- <router-link :to="`/video/view/${row.id}`">
+          <router-link :to="`/video/view/${row.id}`">
             <el-button type="primary" plain>查看</el-button>
-          </router-link> -->
+          </router-link>
         </el-space>
       </template>
 
       <!-- 卡片 -->
       <template #body="{ data }" v-if="isCard">
-        <div class="resource-video-item" v-for="item in data" :key="item.id">{{ item.title }}</div>
+        <div class="card-list">
+          <CardListItem v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
+        </div>
+        <!-- <div class="resource-video-item" v-for="item in data" :key="item.id">{{ item.title }}</div> -->
       </template>
     </AppList>
   </AppCard>
 </template>
+<style lang="scss">
+.card-list{
+  background: #FAFAFA;
+  padding: 20px;
+  display: flex;
+}
+.video-head {
+  position: relative;
+  .video-head-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 30px;
+    color: #666;
+    cursor: pointer;
+  }
+}
+.video-tool-btn {
+  padding: 10px 0 30px 0;
+}
+</style>