|
|
@@ -0,0 +1,247 @@
|
|
|
+<template>
|
|
|
+ <view class="safeArea">
|
|
|
+ <view class="menuWrap">
|
|
|
+ <view class="videoMain">
|
|
|
+ <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
|
|
|
+ <view class="videoTitle">
|
|
|
+ <view class="left">承发包模式-施工合同与物资采购合...</view>
|
|
|
+ <view class="right">
|
|
|
+ <u-icon class="icon" name="file-text"></u-icon>讲义
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-line color="#EEEEEE" />
|
|
|
+ <view class="tabMain" style="width: 100%;text-align: center;">
|
|
|
+ <u-tabs :list="menuList" sticky :current="current" @change="change" active-color="#333" inactive-color="#999"></u-tabs>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="menuMain">
|
|
|
+ <view class="menuItem" v-for="(item,index) in 3" :key="index">
|
|
|
+ <view class="title">2Z106000 施工合同管理-模块标题</view>
|
|
|
+ <u-collapse accordion>
|
|
|
+ <u-collapse-item>
|
|
|
+ <text slot="title" class="u-page__item__title__slot-title">2Z106010 施工承发包的模式-2Z106020 施工合同...</text>
|
|
|
+ <view class="u-collapse-content">
|
|
|
+ <view class="item" v-for="(item,index) in 7" :key="index">
|
|
|
+ <view class="tag">录播</view><!--默认蓝色，红色加red，黄色加yellow-->
|
|
|
+ <!-- <view class="yellow">回放</view> -->
|
|
|
+ <!-- <view class="red">直播</view> -->
|
|
|
+ <view class="info">施工承发包模式-施工合同与物资标题过长...</view>
|
|
|
+ <view class="btn">待重修</view>
|
|
|
+ <view class="status">回放</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ </u-collapse>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ current: 0,
|
|
|
+ menuList: [
|
|
|
+ {
|
|
|
+ name: '重修目录'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '目录'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '笔记'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '答疑'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(index){
|
|
|
+ this.current = index;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {},
|
|
|
+ computed: { ...mapGetters(['userInfo']) }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background: #EAEEF1;
|
|
|
+}
|
|
|
+.videoMain .u-scroll-box{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.menuItem{
|
|
|
+ .u-collapse-item{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .u-arrow-down-icon{
|
|
|
+ position: absolute;
|
|
|
+ left:19rpx;
|
|
|
+ }
|
|
|
+ .u-page__item__title__slot-title{
|
|
|
+ width: 563rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666666;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-left: 90rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.videoMain{
|
|
|
+ width:100%;
|
|
|
+ background: #fff;
|
|
|
+ #myVideo{
|
|
|
+ width:100%;
|
|
|
+ height: 461rpx;
|
|
|
+ background: #000000;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ .videoTitle{
|
|
|
+ height: 80rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left{
|
|
|
+ width: 550rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-left: 32rpx;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: -4rpx 0 4rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.2;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ padding-top: 4rpx;
|
|
|
+ .icon{
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color:#007AFF;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .u-scroll-box{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+}
|
|
|
+.menuMain{
|
|
|
+ padding: 16rpx;
|
|
|
+ .menuItem{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ .title{
|
|
|
+ padding: 33rpx 16rpx 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ padding: 28rpx 16rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ &:first-child{
|
|
|
+ &::after{
|
|
|
+ width:686rpx;
|
|
|
+ left:16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ width: 90%;
|
|
|
+ height:1px;
|
|
|
+ background: #EEEEEE;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right:0;
|
|
|
+ }
|
|
|
+ .tag{
|
|
|
+ width: 56rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 2rpx solid #007AFF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #007AFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ width: 504rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #007AFF;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ background: #FF3B30;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .status{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 1rpx;
|
|
|
+ left: 96rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FF3B30;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.yellow{
|
|
|
+ color: #FF9500!important;
|
|
|
+ border-color: #FF9500!important;;
|
|
|
+}
|
|
|
+.red{
|
|
|
+ color: #FF3B30!important;
|
|
|
+ border-color: #FF3B30!important;;
|
|
|
+}
|
|
|
+</style>
|
linhancai