mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

视频教学完善

Browse Source
This commit is contained in:
cc_zbp 2023-06-01 09:40:55 +08:00
parent 22b6e87cad
commit 23fc590d6f
3 changed files with 239 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
androidPrivacy.json
View File

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

3
pages.json
View File

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

242
pages/nongKe/teach_video/teach_video.vue
View File

@ -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="">顺序播放</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">图片</view>
<view class="right-cont">内容</view>
<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>
@ -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>