proginn-frontend/pages/user/index/video.vue

<template>
  <div style="width:100%;background:gray">
    <template v-for="video in list">
      <div class="video2">
        <div class="video-box">
          <div class="video-img">
            <img class="img" :src="video.cover_url" alt />
            <div class="length">formatSeconds(video.duration)</div>
            <a :href="'proginn://community/video?id='+ video.video_id ">
              <img class="play" src="<?=STA_URL?>/image_v3/icon/play.png" />
            </a>
          </div>
          <div class="video-detail">
            <div class="video-des">((video.title))</div>
            <div class="video-info justify-between">
              <div class="live-source align-center">
                <img :src="video.avatar" style="border-radius: 50%" />
                <div>{{video.name}}</div>
              </div>
              <div class="flex">
                <div class="live-people gray-51 align-center">
                  <img
                    class="see icon"
                    src="<?=STA_URL?>/quan_v3/icon/paly_num.png?v=v<?=STA_VERSION?>"
                  />
                  <div>{{ video.view_count }}</div>
                </div>
                <div class="live-people live-zan gray-51 align-center">
                  <img class="see icon" src="<?=STA_URL?>/quan_v3/icon/zan.png?v=v<?=STA_VERSION?>" />
                  <div>{{ video.like_count }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <router-view />
    <van-tabbar route>
      <van-tabbar-item replace badge="3" to="/user/index/article">
        <span>文章</span>
        <template #icon="props">
          <img :src="props.active ? icon.article.active : icon.article.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/user/index/video" icon="search">
        <span>视频</span>
        <template #icon="props">
          <img :src="props.active ? icon.video.active : icon.video.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        replace
        :to="`/u/`+$store.state.userinfo.uid"
        icon="search"
        v-if="$store.state.userinfo.uid"
      >
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.my.active : icon.my.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace @click="goLogin()" icon="search" v-else>
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.my.active : icon.my.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from "vant";
let container;

export default {
  layout: "opacity_header",
  async asyncData() {
    return {
      title: `选择新建类型-程序员客栈`
    };
  },
  data() {
    return {
      ad: {},
      icon: {
        article: {
          active: require("../../../assets/quan/icon/book_s.png"),
          inactive: require("../../../assets/quan/icon/book.png")
        },
        video: {
          active: require("../../../assets/quan/icon/video_s.png"),
          inactive: require("../../../assets/quan/icon/video.png")
        },
        my: {
          active: require("../../../assets/quan/icon/my_s.png"),
          inactive: require("../../../assets/quan/icon/my.png")
        }
      },
      ops: {
        mode: "native",
        sizeStrategy: "percent",
        detectResize: true
      },
      active: "default",
      list: [],
      page: {
        page: 1,
        noMore: 0
      }
    };
  },
  mounted() {
    container = this.$refs.container;
  },
  created() {
    this.needLogin();
    this.getList();
  },
  methods: {
    getList() {
      let that = this;
      let page = that.page;
      this.$axios
        .$get(
          this.$store.state.domainConfig.jishuinUrl +
            "/list/" +
            this.active +
            "/" +
            page.page
        )
        .then(res => {
          if (res.topics.length > 0) {
            let list = that.list;
            that.list = list.concat(res.topics);
            page++;
          } else {
            page.noMore = 1;
          }

          that.page = page;
        });
    }
  }
};
</script>
<style scoped>
@import "@/assets/css/user/mui.min.css";

body {
  background-color: white;
}
</style>
<style lang='less' scoped>
.community-u {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20px;
}
.avatar {
  border-radius: 50%;
}

.add-con {
  width: 3rem;
  height: 3rem;
  background: rgba(48, 142, 255, 1);
  box-shadow: 0rem 0.12rem 0.54rem 0rem rgba(48, 142, 255, 0.63);
  color: white;
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  line-height: 3rem;
  text-align: center;
  z-index: 1000;
  border-radius: 50%;
  font-size: 2rem;
}

.live,
.article-box {
  margin: 0 0.63rem;
  padding: 1.25rem 0 1.1rem 0;
  position: relative;
}

.live-title {
  width: 20.31rem;
  font-size: 0.94rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(17, 17, 17, 1);
  line-height: 1.31rem;
}

.live-statu {
  height: 1.13rem;
  background: rgba(255, 153, 0, 1);
  border-radius: 0.14rem;
  font-size: 0.56rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 0.81rem;
  padding: 0.13rem 0.18rem;
  margin-right: 0.63rem;
}

.live-statu > img {
  width: 0.61rem !important;
  height: 0.47rem;
  margin-right: 0.25rem;
}

.live-source {
  font-size: 0.69rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
  line-height: 1rem;
  margin-right: 0.38rem;
}

.live-source > img {
  width: 1.13rem !important;
  height: 1.13rem;
}

.live-time {
  font-size: 0.69rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 1rem;
  margin-right: 0.7rem;
}

.live-people {
  font-size: 0.69rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 1rem;
  margin-right: 0.3rem;
}

.live-bottom {
  margin-top: 0.44rem;
  position: relative;
}

.live .close {
  position: absolute;
  top: 1.35rem;
  right: 0px;
  width: 0.75rem !important;
  height: 0.75rem;
}

.see {
  width: 1rem !important;
  height: 1rem;
  margin-right: 0.13rem;
}

.mui-table-view > li {
}

.article-title {
  font-size: 0.94rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(17, 17, 17, 1);
  line-height: 1.31rem;
}

.article-box .justify-between {
  flex-direction: column;
  min-height: 4.5rem;
}

.article-img {
  width: 6.75rem !important;
  height: 5rem;
  border-radius: 0.13rem;
  object-fit: cover;
}

li {
  box-shadow: 0rem -0.03rem 0rem 0rem rgba(243, 243, 243, 1);
}

.mui-active .img-no {
  display: none;
}

.mui-active .img-select {
  display: inline-block;
}

.img-select {
  display: none;
}

.mui-slider-indicator.mui-segmented-control {
  height: 2.81rem;
  background: white;
}

.mui-segmented-control .mui-control-item {
  line-height: 2.81rem;
}

/*.mui-slider-progress-bar {
  	width:1rem;
  	margin-left: 5.45rem;
  }*/
.mui-slider
  .mui-segmented-control.mui-segmented-control-inverted
  ~ .mui-slider-group
  .mui-slider-item {
  border: none;
}

.video2 {
  margin: 0.63rem;
  box-shadow: 0rem 0.06rem 0.24rem 0rem rgba(8, 27, 50, 0.05);
  border-radius: 0.08rem;
  overflow: hidden;
}

.video-box {
  box-shadow: 0rem 0.06rem 0.24rem 0rem rgba(8, 27, 50, 0.05);
  border-radius: 0.08rem;
  overflow: hidden;
}

.video-img {
  position: relative;
  width: 100%;
  height: 12.13rem;
}

.video-img .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem 0.25rem 0rem 0rem;
}

.video-des {
  font-size: 0.94rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(51, 51, 51, 1);
  line-height: 1.31rem;
  margin: 0.63rem 0 0.88rem 0;
}

.video-detail {
  padding: 0.63rem 0.94rem;
  box-shadow: 0rem 0.19rem 0.75rem 0rem rgba(8, 27, 50, 0.05);
  border-radius: 0rem 0rem 0.25rem 0.25rem;
}

.length {
  position: absolute;
  right: 10px;
  bottom: 10px;
  line-height: 22px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 22px;
  color: white;
}

.play {
  position: absolute;
  width: 2.88rem !important;
  height: 2.88rem;
  top: 4.6rem;
  left: 9.7rem;
}

.live-zan {
  margin-left: 0.75rem;
}
</style>