|
|
@@ -0,0 +1,451 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view style="position: fixed;width: 100%;z-index: 999;background: #FFFFFF;" id="top">
|
|
|
+ <view class="video_box">
|
|
|
+ <image
|
|
|
+ src="https://cdn.uviewui.com/uview/swiper/3.jpg"
|
|
|
+ style="width: 100%;height: 460rpx;"
|
|
|
+ ></image>
|
|
|
+ <image v-if="!startStatus" class="video_play" src="/static/play.png" @click="startVideo"></image>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <u-row>
|
|
|
+ <u-col span="10" >
|
|
|
+ <view class="video_t1">施工承发包模式-施工合同与物资采购合...</view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="2">
|
|
|
+ <view class="video_t1_t">
|
|
|
+ <image src="/static/icon/jy_icon.png" style="width: 40rpx;height: 40rpx;"></image>
|
|
|
+ 讲义
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
+ <u-line color="#D6D6DB" />
|
|
|
+ <view>
|
|
|
+ <view style="width: 240px;margin: 0 auto;"><u-tabs :list="list" item-width="150" font-size="24" bar-width="80" :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
|
|
|
+ </view>
|
|
|
+ <u-line color="#D6D6DB" />
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="box">
|
|
|
+ <view class="menuBox" v-for="(item, index) in menuList">
|
|
|
+ <view class="b_title">
|
|
|
+ 2Z106000 施工合同管理-模块标题
|
|
|
+ </view>
|
|
|
+ <view style="color: #666666;font-size: 24rpx;margin: 30rpx 0;" v-for="(item1, index1) in item">
|
|
|
+ <u-icon :name="item1.showChildren?'arrow-down':'arrow-right'" color="#666666" size="28" @click="open(item1)"></u-icon>
|
|
|
+ <text @click="open(item1)">2Z106010 施工承发包的模式-2Z106020 施工合同...</text>
|
|
|
+ <view v-for="(item2, index2) in item1.children" v-if="item1.showChildren" >
|
|
|
+ <view style="display: flex;align-items: center;margin: 20rpx 0;">
|
|
|
+ <view class="tag1">录播</view>
|
|
|
+ <view class="t_content1">施工承发包模式-施工合同与物资采购合同</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ playbackRate: [0.5, 0.8, 1.0],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: '目录'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '笔记'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '答疑'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ menuList:[
|
|
|
+ [{
|
|
|
+ showChildren:false,
|
|
|
+ children:[1,2,3]
|
|
|
+ },{
|
|
|
+ showChildren:false,
|
|
|
+ children:[1]
|
|
|
+ },{
|
|
|
+ showChildren:false,
|
|
|
+ children:[1,2]
|
|
|
+ }],[],[]
|
|
|
+ ],
|
|
|
+ current:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: { ...mapGetters(['userInfo']) },
|
|
|
+ onLoad(option) {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(item){
|
|
|
+ item.showChildren = !item.showChildren
|
|
|
+ },
|
|
|
+ change(index){
|
|
|
+ this.current = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scope>
|
|
|
+ .t_content1{
|
|
|
+ color: #007AFF;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .tag1{
|
|
|
+ border: 2rpx solid #007AFF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #007AFF;
|
|
|
+ padding: 5rpx;
|
|
|
+ }
|
|
|
+ .b_title{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ page {
|
|
|
+ background: #EAEEF1;
|
|
|
+ }
|
|
|
+ .menuBox{
|
|
|
+ width: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+.btnspric {
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 108rpx;
|
|
|
+ padding-left: 43rpx;
|
|
|
+ padding-right: 32rpx;
|
|
|
+}
|
|
|
+.btnspric > .lefprL {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #0c141f;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.btnspric > .lefprR {
|
|
|
+ padding: 0rpx 24rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #32467b;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
|
|
|
+}
|
|
|
+.yhj,
|
|
|
+.hdyhj {
|
|
|
+ padding: 24rpx 29rpx 24rpx 34rpx;
|
|
|
+}
|
|
|
+.yhj {
|
|
|
+ border-bottom: 16rpx solid #f9f9f9;
|
|
|
+}
|
|
|
+.yhjtit {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #0c141f;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+}
|
|
|
+.yhjList {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+}
|
|
|
+.yhjList > .yhjLefts {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.yhjLefts > .yhl {
|
|
|
+ color: #32467b;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-right: 31rpx;
|
|
|
+}
|
|
|
+.yhjLefts > .yhbq {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ff9500;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ background-color: rgba(255, 149, 0, 0.2);
|
|
|
+ border: 2rpx solid #ff9500;
|
|
|
+ height: 38rpx;
|
|
|
+ line-height: 38rpx;
|
|
|
+ padding: 0rpx 16rpx;
|
|
|
+}
|
|
|
+.ts {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin: 14rpx 0rpx;
|
|
|
+ padding-right: 29rpx;
|
|
|
+ padding-left: 34rpx;
|
|
|
+}
|
|
|
+.yh {
|
|
|
+ padding-top: 20rpx;
|
|
|
+}
|
|
|
+.yh > .yhtitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 29rpx;
|
|
|
+ padding-left: 34rpx;
|
|
|
+}
|
|
|
+.priceBxs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.priceBxs > .pricleft {
|
|
|
+ border-radius: 24rpx;
|
|
|
+ border: 1rpx solid #e91313;
|
|
|
+ background-color: rgba(233, 19, 19, 0.1);
|
|
|
+ padding: 0rpx 18rpx;
|
|
|
+ height: 49rpx;
|
|
|
+ line-height: 49rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #e91313;
|
|
|
+ margin-right: 13rpx;
|
|
|
+}
|
|
|
+.topBox {
|
|
|
+ padding: 32rpx 32rpx 24rpx;
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
+}
|
|
|
+.topBox > .boldFonstType {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin: 16rpx 0rpx 23rpx;
|
|
|
+}
|
|
|
+.topBox > .firstTopL {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.topBox > .firstTopL > .imageBs {
|
|
|
+ width: 331rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(47, 67, 121, 0.08);
|
|
|
+}
|
|
|
+.topBox > .firstTopL > .imageBs > image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.topBox > .firstTopL > .textBs {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0c141f;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ padding: 24rpx;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.catalogBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-left: 38rpx;
|
|
|
+ max-height: 305rpx;
|
|
|
+ overflow-y: auto;
|
|
|
+ transition: all 0.4s;
|
|
|
+}
|
|
|
+.catalogBox > .catalogA {
|
|
|
+ min-width: 200rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ // text-align: center;
|
|
|
+ border: 2rpx solid transparent;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background: rgba(22, 119, 255, 0.05);
|
|
|
+ padding-left: 19rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 15rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.catalogBox > .activesq {
|
|
|
+ border-color: #1677ff;
|
|
|
+}
|
|
|
+.changeCatalogBox {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.catalogBox::-webkit-scrollbar {
|
|
|
+ display: none; /* Chrome Safari */
|
|
|
+}
|
|
|
+.box {
|
|
|
+ position: relative;
|
|
|
+ top: 650rpx;
|
|
|
+ padding-bottom: 88rpx;
|
|
|
+ margin: 20rpx;
|
|
|
+}
|
|
|
+.price_t2 {
|
|
|
+ font-size: 18rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.price_t1 {
|
|
|
+ font-size: 33rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #e91313;
|
|
|
+}
|
|
|
+.sc_t {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.sc {
|
|
|
+ width: 29rpx;
|
|
|
+ height: 29rpx;
|
|
|
+}
|
|
|
+.buy {
|
|
|
+ width: 138rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #32467b;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+}
|
|
|
+.video_body {
|
|
|
+ padding-bottom: 96rpx;
|
|
|
+}
|
|
|
+.footer_tab {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ height: 96rpx;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.tj_box {
|
|
|
+ width: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10rpx 0;
|
|
|
+}
|
|
|
+.teacher_t {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-left: 15rpx;
|
|
|
+}
|
|
|
+.teacher_img {
|
|
|
+ width: 87rpx;
|
|
|
+ height: 129rpx;
|
|
|
+}
|
|
|
+.t2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin: 15rpx;
|
|
|
+}
|
|
|
+.r_t2 {
|
|
|
+ width: 201rpx;
|
|
|
+ height: 49rpx;
|
|
|
+ background: rgba(22, 119, 255, 0.05);
|
|
|
+ border: 1rpx solid #32467b;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 23rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5rpx;
|
|
|
+}
|
|
|
+.scroll_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 15rpx 0;
|
|
|
+}
|
|
|
+.r_sliper {
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+.top_line {
|
|
|
+ width: 6rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ background: #32467b;
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+.video_t2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.video_t1 {
|
|
|
+ height: 80rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+.video_t1_t{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 80rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ border-left: solid 1px #D6D6DB;
|
|
|
+}
|
|
|
+.video_play {
|
|
|
+ position: absolute;
|
|
|
+ width: 95rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+.video_box {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.rotoct {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
he2802
