shop-applet/pages/nongKe/teach_video/teach_video.vue

<template>
  <view class="teach_video">
    <view class="head-wrapper" :style="'top:'+statusBarHeight">
      <view class="head-menu">
        <navigator class='iconfont icon-xiangzuo' open-type="navigateBack" hover-class="none"></navigator>
        <navigator class="iconfont icon-shouye4" url="/pages/index/index" open-type="switchTab" hover-class="none">
        </navigator>
      </view>
    </view>
    <view class="teach-head">
      <view class="bg-img">
        <img :src="defaultImg" alt="">
      </view>
      <view class="head-box flex_a_c">
        <view class="left-box">
          <view>
            <view>APP</view>视频教学
          </view>
        </view>
        <view class="right-cont">
          <view class="title">供应链功能教学视频</view>
          <view class="flex_a_c_j_sb">
            <text>作者：里海科技</text>
            <text>1000人已学习</text>
          </view>
        </view>
      </view>
    </view>
    <view class="teach-body">
      <view class="tabs-wrappper">
        <u-tabs :list="tabsList" @click="click" lineColor="#F84221"></u-tabs>
      </view>
      <view class="label flex_a_c">
        <view class="sort-btn">
          <text class="iconfont icon-shipin"></text><text>顺序播放</text>
        </view>
        <text>全6节</text>
      </view>
      <view class="video-list">
        <block v-for="(item, index) in 10" :key="index">
          <view class="video-item">
            <view class="left-img">
              <image :src="defaultImg" mode="aspectFill"></image>
            </view>
            <view class="right-cont">
              <view class="caption flex_a_c">
                <view class="text">供应链</view>财务管理功能解说视频
              </view>
              <view class="section">里海科技</view>
              <view class="explain">
                <view class="">1000人已学习</view>
                <view class="look-btn">观看</view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
  var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  export default {
    data() {
      return {
        defaultImg: 'https://cdn.uviewui.com/uview/album/1.jpg',
        statusBarHeight: statusBarHeight, //系统导航条高度
        tabsList: [
          { name: '目录' }
        ]
      }
    },
    onLoad() {},
    onShow() {},
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    methods: {

    },
  }
</script>

<style lang="scss">
  .teach_video {}

  .teach-head {
    position: relative;
    width: 100%;
    height: 449.12rpx;
    background: url('https://cdn.uviewui.com/uview/album/1.jpg') no-repeat;
    background-size: cover;

    .head-box {
      position: absolute;
      left: 50%;
      bottom: 80rpx;
      transform: translate(-50%);
      width: 695rpx;

      .left-box {
        margin-right: 42.11rpx;
        width: 175.44rpx;
        height: 175.44rpx;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #fff;
        font-size: 38.6upx;
        font-weight: bold;
        text-shadow: 0px 2px 4px #8D1E0A;
        background: url('https://cdn.uviewui.com/uview/album/1.jpg') no-repeat;
        background-size: cover;
      }

      .right-cont {
        flex: 1;
        color: #fff;
        font-size: 28.07rpx;

        .title {
          font-weight: bold;
          font-size: 38.6rpx;
          margin-bottom: 28.07rpx;
        }
      }
    }

    .bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      /* #ifdef MP || APP-PLUS */
      z-index: -1;
      /* #endif */
      /* #ifdef H5 */
      z-index: 0;
      /* #endif */
      z-index: 0;
      filter: blur(0);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        filter: blur(18rpx);
        transform: scale(1.5);
      }
    }
  }

  .teach-body {
    position: relative;
    margin-top: -18px;
    padding: 0 28.07rpx;
    border-radius: 8px;
    background-color: #fff;

    .label {
      margin: 28.07rpx 0 38.6rpx 0;

      .sort-btn {
        padding: 8.77rpx 17.54rpx;
        color: #fff;
        margin-right: 21.05rpx;
        background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
        border-radius: 19px;

        .icon-shipin {
          margin-right: 7.02rpx;
        }
      }
    }

    .video-list {
      .video-item {
        display: flex;
        height: 219.3rpx;
        width: 100%;
        padding: 17.54rpx 0;
        border-bottom: 1px solid #ccc;

        .left-img {
          image {
            width: 215.79rpx;
            height: 182.46rpx;
            border-radius: 8px;
          }
        }

        .right-cont {
          flex: 1;
          margin-left: 17.54rpx;
          font-size: 28.07rpx;

          .caption {
            font-size: 31.58rpx;
            font-weight: bold;

            .text {
              display: flex;
              align-items: center;

              &::after {
                content: '|';
                display: block;
                margin: 0 7.02rpx;
              }
            }
          }

          .section {
            margin: 21.05rpx 0;
          }

          .explain {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .look-btn {
              text-align: center;
              line-height: 49.12rpx;
              color: #F84221;
              width: 114.04rpx;
              height: 49.12rpx;
              background-color: #fedad2;
              border-radius: 19px;
            }
          }
        }
      }
    }
  }

  .head-wrapper {
    z-index: 999;
    display: flex;
    align-items: center;
    position: fixed;
    left: 30rpx;
    top: 0;
    /* #ifdef MP */
    height: 43px;
    /* #endif */
    /* #ifdef H5 */
    height: 114rpx;
    /* #endif */
  }

  .head-menu {
    display: flex;
    align-items: center;
    height: 54rpx;
    width: 140rpx;
    background: rgba(0, 0, 0, .25);
    border-radius: 27rpx;

    .iconfont {
      flex: 1;
      text-align: center;
      color: #fff;
      box-sizing: border-box;

      &.icon-xiangzuo {
        border-right: 1px solid #fff;
      }
    }
  }
</style>