视频教学完善

androidPrivacy.json

@@ -2,9 +2,7 @@
   "version": "1",
   "prompt": "template",
   "title": "服务协议与隐私政策",
-  "message": "\t请务必审慎阅读、充分理解“服务协议与 隐私政策”各条款，包括但不限于：为了 向你提供即时通讯、内容分享等服务，我 们需要收集你的设备信息、操作日志等个 人信息。你可以在“设置”中查看、变更、删除个人信息并管理你的授权。<br/>\r\r\
+  "message": "\t请务必审慎阅读、充分理解“服务协议与 隐私政策”各条款，包括但不限于：为了 向你提供即时通讯、内容分享等服务，我 们需要收集你的设备信息、操作日志、OAID等个 人信息。你可以在“设置”中查看、变更、删除个人信息并管理你的授权。<br/>\r\r\t你可以阅读 < a href = \"https://shop.lihaink.cn/pages/users/user_about/index?from=sys_user_agree\">《用户协议》</a> 与 <a href=\"https://shop.lihaink.cn/pages/users/user_about/index?from=sys_userr_privacy\">《隐私政策》</a>了解详细信息。如你同意，请点击“我同意”开始接受我们的服务。",
-  t你可以阅读 < a href = \
-  "https://shop.lihaink.cn/pages/users/user_about/index?from=sys_user_agree\">《用户协议》</a> 与 <a href=\"https://shop.lihaink.cn/pages/users/user_about/index?from=sys_userr_privacy\">《隐私政策》</a>了解详细信息。如你同意，请点击“我同意”开始接受我们的服务。",
   "buttonAccept": "同意并接受",
   "buttonRefuse": "暂不同意",
   "second": {

pages.json

@@ -233,7 +233,8 @@
                     "style" :                                                                                    
                 {
                     "navigationBarTitleText": "教学视频",
-                    "enablePullDownRefresh": false
+                    "enablePullDownRefresh": false,
+                    "navigationStyle": "custom"
                 }
                 
                 }

pages/nongKe/teach_video/teach_video.vue

@@ -1,19 +1,57 @@
 <template>
   <view class="teach_video">
-    <view class="teach-head"></view>
+    <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>
+      <view class="label flex_a_c">
-        <view class="">顺序播放</view>
+        <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">图片</view>
+            <view class="left-img">
-            <view class="right-cont">内容</view>
+              <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>
@@ -22,9 +60,12 @@
 </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: '目录' }
         ]
@@ -35,10 +76,199 @@
     onPullDownRefresh() {
       uni.stopPullDownRefresh()
     },
-    methods: {},
+    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>