直播列表

src/views/regime/Live.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="video">
+    <div class="nav">
+      <div class="tabs">
+        <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">全部直播</div>
+        <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">未开始</div>
+        <div :class="tabindex == 3 ? 'on' : ''" @click="tabchange(3)">已结束</div>
+      </div>
+      <div class="sel">
+        <img src="@/static/images/sousuo.png" alt="" class="icon" />
+        <input type="text" />
+      </div>
+    </div>
+    <div class="list" v-if="tabindex==1">
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+    </div>
+
+       <div class="list" v-if="tabindex==2">
+      <LiveItem :type="3"></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+    </div>
+          <div class="list" v-if="tabindex==3">
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+    </div>
+    <div class="pages">
+      <a-pagination v-model:current="page" :total="500" :showLessItems="true" />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.video {
+  width: 100%;
+  height: 706px;
+  background-color: #fff;
+  border-radius: 17px;
+  padding: 40px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .nav {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+    justify-content: space-between;
+    width: 100%;
+    .tabs {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+      font-weight: bold;
+      color: #111;
+      padding: 11px 0;
+      > div {
+        margin-right: 58px;
+        cursor: pointer;
+        text-align: center;
+        width: 54px;
+      }
+      .on {
+        color: #08ae98;
+        position: relative;
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          bottom: -12px;
+          width: 57px;
+          height: 1px;
+          background-color: #08ae98;
+        }
+      }
+    }
+    .sel {
+      width: 171px;
+      height: 26px;
+      border: 1px solid #999;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      border-radius: 4px;
+      > img {
+        width: 11px;
+        height: 11px;
+      }
+      > input {
+        width: 119px;
+        font-size: 9px;
+        line-height: 1;
+        margin-left: 6px;
+        border: none;
+        outline: none;
+      }
+    }
+  }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    > div {
+      margin-top: 28px;
+      margin-left: 23px;
+      &:nth-child(1),
+      &:nth-child(6) {
+        margin-left: 0;
+      }
+    }
+  }
+  .pages {
+    position: absolute;
+    bottom: 114px;
+    display: flex;
+    justify-content: center;
+    ::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-item),
+    ::v-deep(.ant-pagination-jump-next-custom-icon),
+    ::v-deep(.ant-pagination-jump-prev-custom-icon) {
+      border: 1px solid #08ae98;
+    }
+    ::v-deep(.ant-pagination-item-active) a {
+      color: #fff;
+    }
+    ::v-deep(.ant-pagination-item-active) {
+      background-color: #08ae98;
+    }
+  }
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import LiveItem from "@/components/LiveItem.vue";
+export default defineComponent({
+  components: {
+    LiveItem,
+  },
+  setup() {
+    const page = ref(6);
+    const tabindex = ref(1);
+     function tabchange(e: number): void {
+         tabindex.value=e
+    }
+    return {
+      page,
+      tabindex,
+      tabchange
+    };
+  },
+});
+</script>