init
commit
0ecbffa3cb
|
|
@ -0,0 +1,5 @@
|
|||
public
|
||||
dist
|
||||
package.json
|
||||
!.prettierrc.cjs
|
||||
env.d.ts
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
"plugin:vue/vue3-recommended",
|
||||
"standard",
|
||||
"@vue/prettier",
|
||||
"eslint:recommended",
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
},
|
||||
ignorePatterns: [
|
||||
"uni_modules/**/*",
|
||||
"hybrid/**/*",
|
||||
"static/**/*",
|
||||
"components/unitv-*/*",
|
||||
],
|
||||
plugins: ["vue"],
|
||||
rules: {
|
||||
"no-console": "warn",
|
||||
"vue/multi-word-component-names": "off",
|
||||
"vue/no-v-html": "off",
|
||||
"vue/require-default-prop": "off",
|
||||
camelcase: "off",
|
||||
eqeqeq: "error",
|
||||
"vue/no-template-shadow": "error",
|
||||
"vue/attribute-hyphenation": "error",
|
||||
"vue/html-end-tags": "error",
|
||||
"vue/eqeqeq": "error",
|
||||
"vue/component-name-in-template-casing": ["error", "kebab-case"],
|
||||
"vue/enforce-style-attribute": [
|
||||
"error",
|
||||
{ allow: ["scoped", "module", "plain"] },
|
||||
],
|
||||
"vue/v-on-event-hyphenation": [
|
||||
"error",
|
||||
"always",
|
||||
{
|
||||
autofix: true,
|
||||
},
|
||||
],
|
||||
"vue/require-explicit-emits": "error",
|
||||
"no-unused-vars": [
|
||||
"error",
|
||||
{ vars: "all", args: "after-used", ignoreRestSiblings: false },
|
||||
],
|
||||
"linebreak-style": ["off", "windows"],
|
||||
"no-restricted-properties": [
|
||||
"error",
|
||||
{ object: "Object", property: "assign" },
|
||||
],
|
||||
"no-restricted-syntax": [
|
||||
"error",
|
||||
{
|
||||
selector: "VariableDeclarator[id.name='pd']",
|
||||
message: "不允许使用 pd，请改用有语义化的变量名",
|
||||
},
|
||||
{
|
||||
selector: "ObjectExpression > Property[key.name='pd']",
|
||||
message: "不允许使用 pd，请改用有语义化的变量名",
|
||||
},
|
||||
],
|
||||
},
|
||||
globals: {
|
||||
plus: "readonly",
|
||||
uni: "readonly",
|
||||
JSEncrypt: "readonly",
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
unpackage
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.hbuilderx
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = {
|
||||
extends: ["@vue/prettier", "plugin:prettier/recommended"],
|
||||
endOfLine: "crlf",
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log("App Launch");
|
||||
// #ifdef APP-PLUS
|
||||
plus.screen.lockOrientation("landscape-primary"); // 锁定横屏
|
||||
plus.navigator.setFullscreen(true); // 隐藏状态栏(应用全屏:只能隐藏状态栏，标题栏和虚拟返回键都还可以显示)
|
||||
// #endif
|
||||
},
|
||||
onShow: function () {
|
||||
console.log("App Show");
|
||||
},
|
||||
onHide: function () {
|
||||
console.log("App Hide");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "styles/common.scss";
|
||||
//::-webkit-scrollbar {
|
||||
// display: none;
|
||||
//}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
// import { post } from "@/utils/request.js";
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<view class="header">
|
||||
<view v-if="isShowUserInfo" class="left">
|
||||
<unitv-zone
|
||||
id="header_zone"
|
||||
class="header_zone"
|
||||
:down="down"
|
||||
:values="[0, 1]"
|
||||
:column="2"
|
||||
>
|
||||
<unitv-item
|
||||
:item="0"
|
||||
class="item"
|
||||
@click="fnNavigate('/pages/login/index')"
|
||||
>
|
||||
<view class="login_btn">登录</view>
|
||||
</unitv-item>
|
||||
<unitv-item
|
||||
:item="1"
|
||||
class="item user"
|
||||
@click="fnNavigate('/pages/mine/index')"
|
||||
>
|
||||
<view class="avatar">
|
||||
<image src="/static/avatar.png" />
|
||||
</view>
|
||||
<view>呀哈哈</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view>{{ time }}</view>
|
||||
<view class="logo">
|
||||
<image src="/static/logo.png" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
isShowUserInfo: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
down: {
|
||||
type: String,
|
||||
default: "tabs_zone",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.time = dayjs().format("HH:mm");
|
||||
setInterval(() => {
|
||||
this.time = dayjs().format("HH:mm");
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
fnNavigate(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
overflow: auto;
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
.header_zone {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
border-radius: 34rpx;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
font-size: 12rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.login_btn {
|
||||
padding: 3rpx 15rpx;
|
||||
border-radius: 34rpx;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.user {
|
||||
position: relative;
|
||||
border-radius: 11rpx;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 3rpx 10rpx 3rpx 30rpx;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 2rpx solid #070a26;
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
|
||||
image {
|
||||
width: 19rpx;
|
||||
height: 19rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hover {
|
||||
background-color: #254eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
font-size: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
|
||||
.logo {
|
||||
margin-left: 26rpx;
|
||||
|
||||
image {
|
||||
width: 62rpx;
|
||||
height: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<view class="loading">
|
||||
<image
|
||||
src="/static/loading1000.gif"
|
||||
mode="aspectFit"
|
||||
:style="{ width, height }"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: "100vw",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "100vh",
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.loading {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
inset: 0;
|
||||
background-color: #1d1c37;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<view :id="id" :class="`${selected?selectClass:''} ${hovered?hoverClass:''}`">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapActions,
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
name: "unitvPage",
|
||||
inject: ['pageId', 'zoneId', 'zoneState', 'zoneItems'],
|
||||
props: {
|
||||
item: {
|
||||
type: Number
|
||||
},
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: 'hover'
|
||||
},
|
||||
selectClass: {
|
||||
type: String,
|
||||
default: 'active'
|
||||
},
|
||||
isSelctByClick: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
this.zoneItems[this.item] = this;
|
||||
},
|
||||
created() {
|
||||
this.zoneItems[this.item] = this;
|
||||
this.selected=this.isSelect;
|
||||
},
|
||||
mounted() {
|
||||
if (this.zoneState.curZone && this.zoneState.curItem == this.item) {
|
||||
this.handleHover();
|
||||
this.refreshScroll();
|
||||
this.refreshState();
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: false,
|
||||
hovered: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['currentZone', 'currentPage']),
|
||||
id: function() {
|
||||
return this.zoneId + '_' + this.item;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clientRect(callback) {
|
||||
let view = uni.createSelectorQuery().in(this).select("#" + this.id);
|
||||
view.boundingClientRect(data => {
|
||||
callback(data);
|
||||
}).exec();
|
||||
},
|
||||
refreshScroll() {
|
||||
this.clientRect((clientRect) => {
|
||||
this.currentPage.RefreshScrollTop(clientRect);
|
||||
if (this.zoneState.curScroll != null) {
|
||||
this.zoneState.curScroll.RefreshScrollLeft(clientRect);
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshState() {
|
||||
if (!this.isSelctByClick) {
|
||||
if (!this.zoneState.curZone && this.zoneState.curItem == this.item) {
|
||||
this.selected = true;
|
||||
} else {
|
||||
this.selected = false;
|
||||
}
|
||||
}
|
||||
if (this.zoneState.curZone && this.zoneState.curItem == this.item) {
|
||||
this.hovered = true;
|
||||
} else {
|
||||
this.hovered = false;
|
||||
}
|
||||
},
|
||||
handleHover() {
|
||||
this.$emit("hover", this.item);
|
||||
},
|
||||
handleClick() {
|
||||
if (this.isSelctByClick) {
|
||||
this.zoneItems.forEach(item => {
|
||||
item.selected = false
|
||||
})
|
||||
this.selected = true
|
||||
}
|
||||
this.$emit("click", this.item);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hovered: function(newValue) {
|
||||
if (newValue != "") {
|
||||
this.handleHover();
|
||||
this.refreshScroll();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
|
||||
<scroll-view v-show="current" scroll-y="true" :style="{height:windowHeight+'px'}" ref="page" :scroll-top="scrollTop"
|
||||
@scroll="scroll">
|
||||
<view @click="whole.onClick" id="onClick"></view>
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
<!-- <unitv-transition :duration="500" :mode-class="['fade']" :styles="transfromClass" :show="current">
|
||||
</unitv-transition> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
name: "unitvPage",
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
prePageId: {
|
||||
type: String
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
handleEvent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
pageId: this.id,
|
||||
pageState: this.pageState
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.show) {
|
||||
this.switchPage(this);
|
||||
}
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.windowHeight = res.windowHeight;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.pushPage(this);
|
||||
},
|
||||
computed: {
|
||||
...mapState(['currentZone', 'currentPage', 'allPages']),
|
||||
current: function() {
|
||||
return this.currentPage == this;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
key: '',
|
||||
windowHeight: null,
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
},
|
||||
Zone: [],
|
||||
pageState: {
|
||||
curZoneId: "",
|
||||
handleEvent: this.handleEvent
|
||||
},
|
||||
transfromClass: {
|
||||
'position': 'fixed',
|
||||
'bottom': 0,
|
||||
'top': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
/* #ifndef APP-NVUE */
|
||||
'display': 'flex',
|
||||
/* #endif */
|
||||
'justify-content': 'center',
|
||||
'align-items': 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['switchPage', 'switchZone', 'pushPage']),
|
||||
showPage() {
|
||||
this.switchPage(this);
|
||||
this.switchZone(this.Zone[this.pageState.curZoneId]);
|
||||
this.Zone[this.pageState.curZoneId].refreshItem();
|
||||
return true;
|
||||
},
|
||||
pushZone(zone) {
|
||||
this.Zone[zone.id] = zone;
|
||||
},
|
||||
keyCodeClick(keyCode) {
|
||||
this.key = keyCode;
|
||||
uni.$emit("keyDown", keyCode);
|
||||
switch (keyCode) {
|
||||
case 'KeyUp':
|
||||
this.evtArrow('up');
|
||||
break;
|
||||
case 'KeyDown':
|
||||
this.evtArrow('down');
|
||||
break;
|
||||
case 'KeyLeft':
|
||||
this.evtArrow('left');
|
||||
break;
|
||||
case 'KeyRight':
|
||||
this.evtArrow('right');
|
||||
break;
|
||||
case 'KeyEnter':
|
||||
this.evtEnter();
|
||||
break;
|
||||
case 'KeyBack':
|
||||
this.evtBack();
|
||||
break;
|
||||
};
|
||||
},
|
||||
evtArrow: function(Arrow) {
|
||||
var zone = this.currentZone;
|
||||
zone.evtArrow(Arrow);
|
||||
},
|
||||
evtEnter: function() {
|
||||
this.currentZone.evtEnter();
|
||||
},
|
||||
evtBack: function() {
|
||||
this.$emit("back");
|
||||
this.key = "KeyBack";
|
||||
},
|
||||
scroll: function(e) {
|
||||
this.old.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
ChangeZone(zoneId) {
|
||||
var zone = this.Zone[zoneId];
|
||||
if (zone) {
|
||||
this.currentZone.zoneState.curZone = false;
|
||||
this.pageState.curZoneId = zoneId;
|
||||
zone.zoneState.curZone = true;
|
||||
this.switchZone(this.Zone[zoneId]);
|
||||
this.Zone[zoneId].refreshItem();
|
||||
}
|
||||
},
|
||||
RefreshScrollTop(clientRect) {
|
||||
var top = clientRect.top;
|
||||
if (top > 0) {
|
||||
top = clientRect.bottom;
|
||||
}
|
||||
if (top > this.windowHeight) {
|
||||
var top1 = this.old.scrollTop + (top - this.windowHeight + 10);
|
||||
this.scrollTop = top1
|
||||
} else if (top < 0) {
|
||||
this.scrollTop = this.old.scrollTop + (top - 20);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
handleEvent: function(val) {
|
||||
this.pageState.handleEvent = val;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script module="whole" lang="renderjs">
|
||||
let code;
|
||||
let KeyName = {
|
||||
19: 'KeyUp',
|
||||
38: 'KeyUp', //Keyboard
|
||||
20: 'KeyDown',
|
||||
40: 'KeyDown', //Keyboard
|
||||
21: 'KeyLeft',
|
||||
37: 'KeyLeft', //Keyboard
|
||||
22: 'KeyRight',
|
||||
39: 'KeyRight', //Keyboard
|
||||
23: 'KeyEnter',
|
||||
13: 'KeyEnter', //Keyboard
|
||||
4: 'KeyBack',
|
||||
18: 'KeyBack', //Keyboard Alt键
|
||||
27: 'KeyBack', //Keyboard ESC
|
||||
24: 'KeyBack', //Keyboard ESC
|
||||
66: 'KeyEnter',
|
||||
111: 'KeyBack'
|
||||
};
|
||||
export default {
|
||||
mounted() {
|
||||
//全局监听按键输入
|
||||
window.document.onkeydown = function(evt) {
|
||||
evt = evt || window.event;
|
||||
var KeyCode = evt.which || evt.keyCode;
|
||||
code = KeyName[KeyCode];
|
||||
evt.preventDefault();
|
||||
if (code != undefined) {
|
||||
document.getElementById("onClick").click();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
onClick(event, ownerInstance) {
|
||||
event.preventDefault();
|
||||
ownerInstance.callMethod('keyCodeClick', code);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.log-key-view {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 20rpx;
|
||||
background: #007AFF;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<scroll-view :scroll-x="true" :scroll-left="scrollLeft" @scroll="scroll">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['pageId', 'zoneId', 'zoneState'],
|
||||
watch: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollLeft: 0,
|
||||
old: {
|
||||
scrollLeft: 0
|
||||
},
|
||||
windowWidth: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.zoneState.curScroll = this;
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.windowWidth = res.windowWidth;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
scroll: function(e) {
|
||||
this.$emit("scroll", {
|
||||
oldLeft: this.old.scrollLeft,
|
||||
left: e.detail.scrollLeft,
|
||||
})
|
||||
this.old.scrollLeft = e.detail.scrollLeft;
|
||||
|
||||
},
|
||||
RefreshScrollLeft(clientRect) {
|
||||
var left = clientRect.left;
|
||||
if (left > 0) {
|
||||
left = clientRect.right;
|
||||
}
|
||||
if (left > this.windowWidth) {
|
||||
var left1 = this.old.scrollLeft + (left - this.windowWidth + 360);
|
||||
this.scrollLeft = left1
|
||||
} else if (left < 0) {
|
||||
this.scrollLeft = this.old.scrollLeft + (left - 380);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
||||
@click="change">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
/**
|
||||
* Transition 过渡动画
|
||||
* @description 简单过渡动画组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {Number} duration 过渡动画持续时间
|
||||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTransition',
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
ani: { in: '',
|
||||
active: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
}
|
||||
let transfrom = ''
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i)
|
||||
transfrom += line + ':' + styles[i] + ';'
|
||||
}
|
||||
return transfrom
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.timer = null
|
||||
// this.nextTick = (time = 50) => new Promise(resolve => {
|
||||
// clearTimeout(this.timer)
|
||||
// this.timer = setTimeout(resolve, time)
|
||||
// return this.timer
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
open() {
|
||||
clearTimeout(this.timer)
|
||||
this.isShow = true
|
||||
this.transform = ''
|
||||
this.ani.in = ''
|
||||
for (let i in this.getTranfrom(false)) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = 'fade-in'
|
||||
} else {
|
||||
this.transform += `${this.getTranfrom(false)[i]} `
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation(true)
|
||||
}, 50)
|
||||
})
|
||||
|
||||
},
|
||||
close(type) {
|
||||
clearTimeout(this.timer)
|
||||
this._animation(false)
|
||||
},
|
||||
_animation(type) {
|
||||
let styles = this.getTranfrom(type)
|
||||
// #ifdef APP-NVUE
|
||||
if(!this.$refs['ani']) return
|
||||
animation.transition(this.$refs['ani'].ref, {
|
||||
styles,
|
||||
duration: this.duration, //ms
|
||||
timingFunction: 'ease',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
}, () => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.transform = ''
|
||||
for (let i in styles) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = `fade-${type?'out':'in'}`
|
||||
} else {
|
||||
this.transform += `${styles[i]} `
|
||||
}
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
|
||||
}, this.duration)
|
||||
// #endif
|
||||
|
||||
},
|
||||
getTranfrom(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
}
|
||||
this.modeClass.forEach((mode) => {
|
||||
switch (mode) {
|
||||
case 'fade':
|
||||
styles.opacity = type ? 1 : 0
|
||||
break;
|
||||
case 'slide-top':
|
||||
styles.transform += `translateY(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'slide-right':
|
||||
styles.transform += `translateX(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-bottom':
|
||||
styles.transform += `translateY(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-left':
|
||||
styles.transform += `translateX(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'zoom-in':
|
||||
styles.transform += `scale(${type?1:0.8}) `
|
||||
break;
|
||||
case 'zoom-out':
|
||||
styles.transform += `scale(${type?1:1.2}) `
|
||||
break;
|
||||
}
|
||||
})
|
||||
return styles
|
||||
},
|
||||
_modeClassArr(type) {
|
||||
let mode = this.modeClass
|
||||
if (typeof(mode) !== "string") {
|
||||
let modestr = ''
|
||||
mode.forEach((item) => {
|
||||
modestr += (item + '-' + type + ',')
|
||||
})
|
||||
return modestr.substr(0, modestr.length - 1)
|
||||
} else {
|
||||
return mode + '-' + type
|
||||
}
|
||||
},
|
||||
// getEl(el) {
|
||||
// console.log(el || el.ref || null);
|
||||
// return el || el.ref || null
|
||||
// },
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-transition {
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: transform, opacity;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slide-top-in {
|
||||
/* transition-property: transform, opacity; */
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.slide-top-active {
|
||||
transform: translateY(0);
|
||||
/* opacity: 1; */
|
||||
}
|
||||
|
||||
.slide-right-in {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-right-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-bottom-in {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.slide-bottom-active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.slide-left-in {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-left-active {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zoom-in-in {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.zoom-out-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.zoom-out-in {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<video id="player" :class="clazz" :src="src" :autoplay="autoplay" :initial-time="initialTime" :enable-play-gesture="false" :title="title"
|
||||
:enable-progress-gesture="false" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-progress="true" @play="status=1"
|
||||
@pause="status=0" @timeupdate="timeupdate" @fullscreenchange="fullscreenchange" :poster="pauseImg"
|
||||
@ended="$emit('ended')" @error="errorFun" width="100%" height="100%" style="width: 100%;height: 100%;">
|
||||
<cover-image src="../../static/loading_1920.gif" class="loading_box" v-if="isSHowLoading"
|
||||
:play-strategy="2"></cover-image>
|
||||
</video>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['pageId', 'pageState'],
|
||||
watch: {
|
||||
|
||||
},
|
||||
props: {
|
||||
clazz: {
|
||||
type: String
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
src: {
|
||||
type: String
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showProgress: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSHowLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pauseImg: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
failStatus: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
initialTime: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 0,
|
||||
currentTime: 0,
|
||||
fullScreen: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.viderContext = uni.createVideoContext("player", this);
|
||||
},
|
||||
onLoad() {
|
||||
uni.$on('keyDown', this.keyDownFun);
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off('keyDown', this.keyDownFun);
|
||||
},
|
||||
methods: {
|
||||
keyDownFun(data) {
|
||||
console.log("keyDownFun")
|
||||
this.keyDown(data);
|
||||
},
|
||||
keyDown(Arrow) {
|
||||
console.log("监测到按键：" + Arrow)
|
||||
switch (Arrow) {
|
||||
case 'KeyLeft': {
|
||||
var time = parseInt(this.currentTime - 15, 10);
|
||||
this.viderContext.seek(time < 0 ? 0 : time)
|
||||
}
|
||||
break;
|
||||
case 'KeyRight': {
|
||||
var time = parseInt(this.currentTime + 15, 10);
|
||||
this.viderContext.seek(time);
|
||||
}
|
||||
break;
|
||||
case 'KeyEnter': {
|
||||
this.clickVideo();
|
||||
}
|
||||
break;
|
||||
};
|
||||
},
|
||||
clickVideo() {
|
||||
if (this.status) {
|
||||
this.viderContext.pause();
|
||||
this.viderContext.showStatusBar();
|
||||
} else {
|
||||
this.viderContext.play();
|
||||
this.viderContext.hideStatusBar();
|
||||
}
|
||||
},
|
||||
timeupdate: function(e) {
|
||||
this.currentTime = e.detail.currentTime;
|
||||
this.$emit("timeupdate", e.detail.currentTime)
|
||||
},
|
||||
fullscreenchange: function(e) {
|
||||
this.fullScreen = e.detail.fullScreen;
|
||||
this.pageState.handleEvent = e.detail.fullScreen;
|
||||
uni.$off('keyDown', this.keyDownFun);
|
||||
if (this.fullScreen) {
|
||||
this.viderContext.play();
|
||||
uni.$on('keyDown', this.keyDownFun);
|
||||
}
|
||||
this.$emit("fullscreenchange", e.detail.fullScreen)
|
||||
},
|
||||
errorFun() {
|
||||
this.$emit("errorFun")
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.controls-play.img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.loading_box {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
|
||||
.fail_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<view :id="id">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapMutations,
|
||||
mapActions,
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
name: "unitvZone",
|
||||
inject: ['pageId', 'pageState'],
|
||||
props: {
|
||||
id: { // Zone Id
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
up: { // Zone切换时上一Zone Id
|
||||
type: String
|
||||
},
|
||||
down: { // Zone切换时下一Zone Id
|
||||
type: String
|
||||
},
|
||||
left: { // Zone切换时左一Zone Id
|
||||
type: String
|
||||
},
|
||||
right: { // Zone切换时右一Zone Id
|
||||
type: String
|
||||
},
|
||||
item: { // Zone当前焦点item索引
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
prevZone: { // Zone改变后的上一个Zone Id
|
||||
type: String
|
||||
},
|
||||
row: { // Zone的item总行数
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
column: { // Zone的item总列数
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
defaultBehavior: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoFous: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
zoneId: this.id,
|
||||
zoneState: this.zoneState,
|
||||
zoneItems: this.items
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//console.log(this.pageId)
|
||||
if (this.autoFous) {
|
||||
this.pageState.curZoneId = this.id;
|
||||
this.zoneState.curZone = true;
|
||||
this.focus = true;
|
||||
this.switchZone(this);
|
||||
}
|
||||
this._switchItem(this.item);
|
||||
this.currentPage.pushZone(this);
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['currentZone', 'currentPage']),
|
||||
size: function() {
|
||||
if (this.count != 0) {
|
||||
return this.count;
|
||||
} else if (this.values.length != 0) {
|
||||
return this.values.length;
|
||||
} else {
|
||||
return this.items.length;
|
||||
}
|
||||
},
|
||||
rows: function() {
|
||||
if (this.row > 1) {
|
||||
return this.row;
|
||||
}
|
||||
return Math.ceil(this.size / this.column)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
citem: 0,
|
||||
crow: 0, // Zone的当前行
|
||||
prevItem: 0, // item改变后的上一item索引
|
||||
focus: false,
|
||||
items: [], // Zone的所有item数组集合
|
||||
zoneState: {
|
||||
curItem: this.citem,
|
||||
curZone: this.focus,
|
||||
curScroll: null
|
||||
},
|
||||
StepSeq: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['switchZone']),
|
||||
_switchItem: function(item, oldItem) {
|
||||
this.citem = item;
|
||||
this.zoneState.curItem = item;
|
||||
try {
|
||||
this.refreshItem();
|
||||
if (oldItem != undefined) {
|
||||
this.items[oldItem].refreshState();
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
refreshItem: function() {
|
||||
this.items[this.citem].refreshState();
|
||||
},
|
||||
evtArrow: function(Arrow) {
|
||||
var self = this;
|
||||
//this._switchItem(this.citem+1);
|
||||
var oldItem = this.citem || 0;
|
||||
var item = this.citem || 0;
|
||||
var steps = this.rows * this.column;
|
||||
var Row = Math.floor(item / this.column);
|
||||
var Border = this[Arrow];
|
||||
var cRow = this.crow;
|
||||
switch (Arrow) {
|
||||
case 'left':
|
||||
item -= 1;
|
||||
if (Math.floor(item / this.column) != Row) {
|
||||
item = item - steps;
|
||||
}
|
||||
break;
|
||||
case 'right':
|
||||
item += 1;
|
||||
if (Math.floor(item / this.column) != Row) {
|
||||
item = item + steps;
|
||||
}
|
||||
break;
|
||||
case 'up':
|
||||
item -= this.column;
|
||||
this.crow = cRow - 1;
|
||||
break;
|
||||
case 'down':
|
||||
item += this.column
|
||||
this.crow = cRow + 1;
|
||||
if (item >= this.size - 1 && this.crow === this.rows - 1) {
|
||||
item = this.size - 1
|
||||
}
|
||||
|
||||
break;
|
||||
};
|
||||
if (item >= 0 && item <= this.size - 1) {
|
||||
if (item + this.StepSeq * steps + 1 > this.size) {
|
||||
item = this.size - this.StepSeq * steps - 1;
|
||||
}
|
||||
this.citem = item;
|
||||
this._switchItem(this.citem, oldItem);
|
||||
if (this.crow === (this.rows - 1)) {
|
||||
this.$emit("scrolltolower");
|
||||
}
|
||||
} else {
|
||||
this.crow = cRow;
|
||||
OverBorder();
|
||||
};
|
||||
|
||||
function OverBorder() {
|
||||
if (Border) {
|
||||
if (Border === self.id) {
|
||||
ScrollItem();
|
||||
} else {
|
||||
ChangeZone();
|
||||
}
|
||||
};
|
||||
|
||||
function ScrollItem() {
|
||||
switch (Arrow) {
|
||||
case 'up':
|
||||
item = self.citem + self.column * (self.rows - 1);
|
||||
self.crow = self.rows - 1;
|
||||
break
|
||||
case 'down':
|
||||
item = self.citem - self.column * (self.rows - 1);
|
||||
self.crow = 0;
|
||||
break
|
||||
case 'left':
|
||||
item = (Row + 1) * self.column - 1;
|
||||
break
|
||||
case 'right':
|
||||
item = Row * self.column;
|
||||
break
|
||||
};
|
||||
//当前焦点区域对应的数值的个数超过一屏的显示个数，产生翻页效果
|
||||
if (self.size > steps) {
|
||||
self.StepSeq = self.StepSeq || 0;
|
||||
var MaxSeq = Math.ceil(self.size / steps) - 1;
|
||||
if ((Arrow === 'left') || (Arrow === 'up')) {
|
||||
//左键或者上键，往前翻
|
||||
self.StepSeq = (self.StepSeq > 0) ? self.StepSeq - 1 : MaxSeq;
|
||||
} else if ((Arrow === 'right') || (Arrow === 'down')) {
|
||||
//右键或者下键，往后翻
|
||||
self.StepSeq = (self.StepSeq < MaxSeq) ? self.StepSeq + 1 : 0;
|
||||
};
|
||||
};
|
||||
//数值个数不够时，光标定位在第一个上面
|
||||
if (item + self.StepSeq * steps + 1 > self.size) {
|
||||
item = 0;
|
||||
}
|
||||
self.citem = item;
|
||||
//执行用户定义函数
|
||||
self._switchItem(self.citem, oldItem);
|
||||
};
|
||||
|
||||
function ChangeZone() {
|
||||
self.currentPage.ChangeZone(Border);
|
||||
self.refreshItem();
|
||||
self.$emit("swtichZone", self.zoneState)
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
},
|
||||
evtEnter: function() {
|
||||
var itemObj = this.items[this.citem];
|
||||
if (itemObj) {
|
||||
itemObj.handleClick();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
values: function(newVal, oldVal) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import App from "./App";
|
||||
import store from "@/store/index.js";
|
||||
import "dayjs/locale/zh-cn";
|
||||
// #ifndef VUE3
|
||||
import Vue from "vue";
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from "vue";
|
||||
// #endif
|
||||
|
||||
// #ifndef VUE3
|
||||
Vue.config.productionTip = false;
|
||||
App.mpType = "app";
|
||||
const app = new Vue({
|
||||
...App,
|
||||
store,
|
||||
});
|
||||
app.$mount();
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App);
|
||||
app.use(store);
|
||||
return {
|
||||
app,
|
||||
};
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
{
|
||||
"name" : "金安铸云",
|
||||
"appid" : "__UNI__9209C12",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.1",
|
||||
"versionCode" : "101",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"orientation" : [ "landscape-primary" ],
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"nvueCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"VideoPlayer" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ],
|
||||
"targetSdkVersion" : 28
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"ad" : {}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"androidStyle" : "default",
|
||||
"android" : {
|
||||
"hdpi" : "static/bg.9.png",
|
||||
"xhdpi" : "static/bg.9.png",
|
||||
"xxhdpi" : "static/bg.9.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2",
|
||||
"fallbackLocale" : "zh-Hans",
|
||||
"locale" : "zh-Hans"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"dayjs": "^1.11.13",
|
||||
"uqrcodejs": "^4.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/html5plus": "^1.0.5",
|
||||
"@types/uni-app": "^1.4.8",
|
||||
"@vue/eslint-config-prettier": "^7.1.0",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-prettier": "^8.10.0",
|
||||
"eslint-config-standard": "^17.1.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-n": "^15.7.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-vue": "^9.19.2",
|
||||
"prettier": "^2.8.8",
|
||||
"vue-eslint-parser": "^9.3.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"unitv-(.*)" : "@/components/unitv-$1/unitv-$1.vue",
|
||||
"app-(.*)" : "@/components/app-$1/index.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/curriculum/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/curriculum/play",
|
||||
"style": {
|
||||
"navigationBarTitleText": "视频播放"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/curriculum/buy",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程购买"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/curriculum/buy_success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购买成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/curriculum/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的课程"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationStyle": "custom",//去掉导航栏
|
||||
"rpxCalcMaxDeviceWidth": 2560, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
|
||||
"rpxCalcBaseDeviceWidth": 1920, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
|
||||
"rpxCalcIncludeWidth": 2560 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<unitv-page
|
||||
id="curriculumBuyPage"
|
||||
ref="curriculumBuyPage"
|
||||
class="curriculumBuyPage"
|
||||
:show="true"
|
||||
>
|
||||
<app-header />
|
||||
<view class="content">
|
||||
<view class="left">
|
||||
<view class="shop">
|
||||
<image src="/static/public_images/video_bg1.jpg" />
|
||||
<view class="name line-4">
|
||||
课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称课程名称
|
||||
</view>
|
||||
</view>
|
||||
<view class="money">
|
||||
<view class="price">￥123</view>
|
||||
<view class="tip">购买此课程</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode">
|
||||
<view class="image">
|
||||
<view class="payee">收款方：河北秦安安全科技有限公司</view>
|
||||
<canvas
|
||||
id="qrcode"
|
||||
canvas-id="qrcode"
|
||||
:style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
|
||||
/>
|
||||
<view class="tip">使用微信扫一扫支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</unitv-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UQRCode from "uqrcodejs";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvasSize: uni.upx2px(170),
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (this.$refs.curriculumBuyPage) {
|
||||
this.$refs.curriculumBuyPage.showPage();
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
const qr = new UQRCode();
|
||||
qr.data = "qrcode_url";
|
||||
qr.size = this.canvasSize;
|
||||
qr.make();
|
||||
qr.canvasContext = uni.createCanvasContext("qrcode");
|
||||
qr.drawCanvas();
|
||||
// setTimeout(() => {
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/curriculum/buy_success",
|
||||
// });
|
||||
// }, 10000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 61rpx 77rpx 54rpx 45rpx;
|
||||
|
||||
.left {
|
||||
width: 355rpx;
|
||||
|
||||
.shop {
|
||||
width: 355rpx;
|
||||
height: 124rpx;
|
||||
background-image: url("/static/by_shop_bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
padding: 24rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 133rpx;
|
||||
height: 75rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
font-size: 14rpx;
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
margin-top: 10rpx;
|
||||
width: 355rpx;
|
||||
height: 54rpx;
|
||||
background-image: url("/static/by_shop_money_bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
color: rgba(115, 62, 2, 1);
|
||||
font-weight: bold;
|
||||
|
||||
.price {
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 17rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 14rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 121rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
margin-left: 43rpx;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.17);
|
||||
border-radius: 4px;
|
||||
padding: 12rpx;
|
||||
|
||||
.image {
|
||||
background-color: #fff;
|
||||
padding: 12rpx;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.payee {
|
||||
padding-bottom: 6rpx;
|
||||
font-size: 9rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding-top: 7rpx;
|
||||
color: rgba(7, 15, 48, 1);
|
||||
font-size: 13rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<unitv-page
|
||||
id="curriculumBuySuccessPage"
|
||||
ref="curriculumBuySuccessPage"
|
||||
class="curriculumBuySuccessPage"
|
||||
:show="true"
|
||||
>
|
||||
<app-header down="curriculum_buy_success_first_zone" />
|
||||
<view class="content">
|
||||
<view class="image">
|
||||
<image src="/static/buy_success.png" />
|
||||
</view>
|
||||
<view class="tip">订单支付成功！请在我的课程中查看</view>
|
||||
<view class="info">
|
||||
<view>订单编号：20241028153636598755</view>
|
||||
<view>订单名称：安全视频 消防安全基础知识培训课程</view>
|
||||
<view>订单时间：2024-10-28 15:06</view>
|
||||
<view>订单价格：365元</view>
|
||||
</view>
|
||||
<unitv-zone
|
||||
id="curriculum_buy_success_first_zone"
|
||||
class="curriculum_buy_success_first_zone"
|
||||
up="header_zone"
|
||||
:values="[0]"
|
||||
:column="1"
|
||||
auto-fous
|
||||
:item="0"
|
||||
>
|
||||
<unitv-item :item="0" class="item">
|
||||
<view class="text">我的课程</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</unitv-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onShow() {
|
||||
if (this.$refs.curriculumBuySuccessPage) {
|
||||
this.$refs.curriculumBuySuccessPage.showPage();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
.content {
|
||||
width: 400rpx;
|
||||
margin: 29rpx auto auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.image {
|
||||
width: 113rpx;
|
||||
height: 116rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 12rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 18rpx 100rpx 16rpx 18rpx;
|
||||
margin-top: 25rpx;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
view {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.curriculum_buy_success_first_zone {
|
||||
margin-top: 15rpx;
|
||||
|
||||
.item {
|
||||
background-color: rgba(37, 78, 255, 1);
|
||||
border-radius: 2rpx;
|
||||
width: 190rpx;
|
||||
height: 38rpx;
|
||||
font-size: 14rpx;
|
||||
text-align: center;
|
||||
line-height: 38rpx;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
export default [
|
||||
{
|
||||
name: "基础知识",
|
||||
nodes: [
|
||||
{
|
||||
coursewareName: "气体基础知识",
|
||||
url: "https://video.qhdsafety.com/sv/5b72c64c-192e53dc244/5b72c64c-192e53dc244.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "现场一线员工全面安全培训",
|
||||
url: "https://video.qhdsafety.com/sv/5eeb67f3-192e099ebba/5eeb67f3-192e099ebba.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "出差人员基础安全知识与应急处置",
|
||||
url: "https://video.qhdsafety.com/sv/40c0369f-192e099692d/40c0369f-192e099692d.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "现场安全负责人全面安全培训",
|
||||
url: "https://video.qhdsafety.com/sv/6b9ef0b-192e098bf81/6b9ef0b-192e098bf81.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "危险货物运输包装-气瓶",
|
||||
url: "https://video.qhdsafety.com/sv/a5a0ad5-192e06394c6/a5a0ad5-192e06394c6.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "职业病危害专项治理",
|
||||
url: "https://video.qhdsafety.com/sv/5714ae67-1930b695a05/5714ae67-1930b695a05.mp4",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "安全生产条例",
|
||||
nodes: [
|
||||
{
|
||||
coursewareName: "《四川省安全生产条例》特色解读",
|
||||
url: "https://video.qhdsafety.com/sv/478dfce2-192e08e3216/478dfce2-192e08e3216.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "企业贯彻落实《四川省安全生产条例》精要",
|
||||
url: "https://video.qhdsafety.com/sv/4289cf05-192e08cdd4d/4289cf05-192e08cdd4d.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "《四川省安全生产举报奖励办法》解读",
|
||||
url: "https://video.qhdsafety.com/sv/1ebad0e6-192e08b8700/1ebad0e6-192e08b8700.mp4",
|
||||
},
|
||||
{
|
||||
coursewareName: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||||
url: "https://video.qhdsafety.com/sv/1c845c96-192e08a5b4b/1c845c96-192e08a5b4b.mp4",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,522 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<unitv-page
|
||||
id="curriculumDetailsPage"
|
||||
ref="curriculumDetailsPage"
|
||||
class="curriculumDetailsPage"
|
||||
:show="true"
|
||||
>
|
||||
<app-header down="curriculum_details_first_zone" />
|
||||
<view class="curriculumInfo">
|
||||
<view class="info">
|
||||
<view class="curriculumName">
|
||||
{{ curriculumInfo.curriculumName }}
|
||||
</view>
|
||||
<view class="introduction line-3">
|
||||
{{ curriculumInfo.introduction }}
|
||||
</view>
|
||||
<unitv-zone
|
||||
id="curriculum_details_first_zone"
|
||||
class="curriculum_details_first_zone"
|
||||
up="header_zone"
|
||||
down="curriculum_details_second_zone"
|
||||
:values="[0, 1]"
|
||||
:column="2"
|
||||
>
|
||||
<unitv-item :item="0" class="item trySee" @click="fnFullScreen">
|
||||
<view class="icon">
|
||||
<image src="/static/bofang.png" />
|
||||
</view>
|
||||
<view class="text">全屏试看</view>
|
||||
</unitv-item>
|
||||
<unitv-item :item="1" class="item buy" @click="fnBuy">
|
||||
<view class="price">￥{{ curriculumInfo.price }}</view>
|
||||
<view class="text">购买课程</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view v-if="!video.url" class="cover">
|
||||
<image :src="curriculumInfo.cover" mode="widthFix" />
|
||||
</view>
|
||||
<view v-if="video.url && !isFullScreen" class="cover">
|
||||
<unitv-video
|
||||
id="player"
|
||||
:src="video.url"
|
||||
:title="video.title"
|
||||
:initial-time="video.time"
|
||||
@timeupdate="fnTimeupdate"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chapter">
|
||||
<view class="main_title">
|
||||
<text>章节</text>
|
||||
<text class="current">{{ currentChapterInfo.name }}</text>
|
||||
</view>
|
||||
<unitv-zone
|
||||
id="curriculum_details_second_zone"
|
||||
:key="currentChapterIndex"
|
||||
class="curriculum_details_second_zone"
|
||||
up="curriculum_details_first_zone"
|
||||
down="curriculum_details_third_zone"
|
||||
:values="currentChapterInfo.nodes"
|
||||
:column="currentChapterInfo.nodes.length"
|
||||
>
|
||||
<unitv-scroll>
|
||||
<view class="scroll">
|
||||
<unitv-item
|
||||
v-for="(item, index) in currentChapterInfo.nodes"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnPlayVideo(item)"
|
||||
>
|
||||
<view class="text">{{ item.coursewareName }}</view>
|
||||
</unitv-item>
|
||||
</view>
|
||||
</unitv-scroll>
|
||||
</unitv-zone>
|
||||
<unitv-zone
|
||||
id="curriculum_details_third_zone"
|
||||
class="curriculum_details_third_zone"
|
||||
up="curriculum_details_second_zone"
|
||||
down="curriculum_details_fourth_zone"
|
||||
:values="chapterList"
|
||||
:column="chapterList.length"
|
||||
auto-fous
|
||||
:item="0"
|
||||
>
|
||||
<unitv-scroll>
|
||||
<view class="scroll">
|
||||
<unitv-item
|
||||
v-for="(item, index) in chapterList"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnClickChapterItem"
|
||||
>
|
||||
<view class="text">{{ item.name }}</view>
|
||||
<view
|
||||
v-if="index !== chapterList.length - 1"
|
||||
class="border_right"
|
||||
/>
|
||||
<view class="border_bottom" />
|
||||
</unitv-item>
|
||||
</view>
|
||||
</unitv-scroll>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="recommend_curriculum">
|
||||
<view class="main_title">为你推荐</view>
|
||||
<unitv-zone
|
||||
id="curriculum_details_fourth_zone"
|
||||
class="curriculum_details_fourth_zone"
|
||||
up="curriculum_details_third_zone"
|
||||
:values="recommendCurriculumList"
|
||||
:column="recommendCurriculumList.length"
|
||||
>
|
||||
<unitv-scroll>
|
||||
<view class="scroll">
|
||||
<unitv-item
|
||||
v-for="(item, index) in recommendCurriculumList"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnSwitchCurriculum"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</view>
|
||||
</unitv-scroll>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</unitv-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chapterList from "./chapterList";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curriculumInfo: {
|
||||
curriculumName: "气体基础知识",
|
||||
introduction:
|
||||
"气体是指无形状有体积的可压缩和膨胀的流体。气体是物质的一个态，气体与液体一样是流体：它可以流动，可变形。与液体不同的是气体气体分子间距离很大，可以被压缩膨胀。假如没有限制（容器或力场）的话，气体可以膨胀，其体积不受限制。气态物质的原子或分子相互之间可以自由运动。气态物质的原子或分子的动能比较高。 气体形态可通过其体积、温度和其压强所影响。这几项要素构成了多项气体定律，而三者之间又可以互相影响。",
|
||||
cover: require("../../static/public_images/video_bg1.jpg"),
|
||||
price: "123",
|
||||
},
|
||||
video: {
|
||||
url: "",
|
||||
title: "",
|
||||
time: 0,
|
||||
},
|
||||
chapterList,
|
||||
currentChapterIndex: 0,
|
||||
currentChapterInfo: {},
|
||||
recommendCurriculumList: [],
|
||||
videoContext: null,
|
||||
isFullScreen: false,
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (this.$refs.curriculumDetailsPage) {
|
||||
this.$refs.curriculumDetailsPage.showPage();
|
||||
if (this.videoContext) {
|
||||
this.videoContext.play();
|
||||
}
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
this.videoContext && this.videoContext.pause();
|
||||
},
|
||||
onLoad() {
|
||||
this.fnInitCurrentChapter();
|
||||
this.fnGetRecommendCurriculum();
|
||||
},
|
||||
methods: {
|
||||
fnInitCurrentChapter() {
|
||||
this.currentChapterInfo = this.chapterList[this.currentChapterIndex];
|
||||
},
|
||||
fnClickChapterItem(event) {
|
||||
this.currentChapterIndex = event;
|
||||
this.fnInitCurrentChapter();
|
||||
},
|
||||
async fnGetRecommendCurriculum() {
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg1.jpg`),
|
||||
title: "气体基础知识",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg2.jpg`),
|
||||
title: "现场一线员工全面安全培训",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg3.jpg`),
|
||||
title: "出差人员基础安全知识与应急处置",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg4.jpg`),
|
||||
title: "现场安全负责人全面安全培训",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg5.jpg`),
|
||||
title: "《四川省安全生产条例》特色解读",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg6.jpg`),
|
||||
title: "企业贯彻落实《四川省安全生产条例》精要",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg7.jpg`),
|
||||
title: "《四川省安全生产举报奖励办法》解读",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg8.jpg`),
|
||||
title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg9.jpg`),
|
||||
title: "危险货物运输包装-气瓶",
|
||||
});
|
||||
this.recommendCurriculumList.push({
|
||||
img: require(`../../static/public_images/video_bg10.jpg`),
|
||||
title: "职业病危害专项治理",
|
||||
});
|
||||
},
|
||||
async fnPlayVideo(item) {
|
||||
this.video.url = "";
|
||||
await this.$nextTick();
|
||||
this.video.url = item.url;
|
||||
this.video.title = item.coursewareName;
|
||||
this.video.time = 0;
|
||||
await this.$nextTick();
|
||||
!this.videoContext &&
|
||||
(this.videoContext = uni.createVideoContext("player"));
|
||||
},
|
||||
fnTimeupdate(time) {
|
||||
this.video.time = time;
|
||||
},
|
||||
fnFullScreen() {
|
||||
this.isFullScreen = true;
|
||||
this.videoContext = null;
|
||||
const { url, time, title } = this.video;
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/play?url=${url}&title=${title}&time=${time}`,
|
||||
animationType: "none",
|
||||
events: {
|
||||
timeupdate: async ({ time }) => {
|
||||
this.isFullScreen = false;
|
||||
this.video.time = time;
|
||||
await this.$nextTick();
|
||||
!this.videoContext &&
|
||||
(this.videoContext = uni.createVideoContext("player"));
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
fnBuy() {
|
||||
uni.navigateTo({ url: "/pages/curriculum/buy" });
|
||||
},
|
||||
fnSwitchCurriculum() {
|
||||
uni.redirectTo({
|
||||
url: "/pages/curriculum/details",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
.curriculumInfo {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
|
||||
.curriculumName {
|
||||
font-size: 18rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
font-size: 12rpx;
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
|
||||
.curriculum_details_first_zone {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
|
||||
.trySee {
|
||||
width: 53rpx;
|
||||
height: 53rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1rpx;
|
||||
border: 1px solid rgba(207, 207, 247, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-bottom: 5rpx;
|
||||
|
||||
image {
|
||||
width: 15rpx;
|
||||
height: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 9rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 1rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
|
||||
.buy {
|
||||
margin-left: 14rpx;
|
||||
width: 53rpx;
|
||||
height: 53rpx;
|
||||
background-image: url("/static/buy_bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 1rpx;
|
||||
text-align: center;
|
||||
padding: 8rpx;
|
||||
border: 1rpx solid transparent;
|
||||
|
||||
.price {
|
||||
color: rgba(115, 62, 2, 1);
|
||||
font-size: 14rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 9rpx;
|
||||
color: rgba(85, 45, 0, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 1rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
margin-left: 13rpx;
|
||||
width: 343rpx;
|
||||
height: 150rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chapter {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.main_title {
|
||||
font-size: 14rpx;
|
||||
|
||||
.current {
|
||||
margin-left: 9rpx;
|
||||
font-size: 9rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.curriculum_details_second_zone {
|
||||
margin-top: 5rpx;
|
||||
|
||||
.scroll {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
|
||||
.item {
|
||||
margin-left: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 9rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
background-color: #254eff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(37, 78, 255, 0.39);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.curriculum_details_third_zone {
|
||||
margin-top: 5rpx;
|
||||
|
||||
.scroll {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.border_right {
|
||||
width: 1rpx;
|
||||
background-color: #fff;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.border_bottom {
|
||||
width: 60%;
|
||||
background-color: transparent;
|
||||
height: 1rpx;
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.text {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.border_bottom {
|
||||
left: calc(20% - 5rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 9rpx;
|
||||
border-bottom: 1rpx solid transparent;
|
||||
padding: 5rpx 10rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
.border_bottom {
|
||||
background-color: #254eff;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.border_bottom {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend_curriculum {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.main_title {
|
||||
font-size: 14rpx;
|
||||
}
|
||||
|
||||
.curriculum_details_fourth_zone {
|
||||
margin-top: 5rpx;
|
||||
|
||||
.scroll {
|
||||
white-space: nowrap;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: calc(18% - 20rpx);
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
margin-left: 20rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 9rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<unitv-page
|
||||
id="curriculumPlayPage"
|
||||
ref="curriculumPlayPage"
|
||||
class="curriculumPlayPage"
|
||||
:show="true"
|
||||
>
|
||||
<unitv-video
|
||||
id="player"
|
||||
:src="url"
|
||||
:title="title"
|
||||
:initial-time="time"
|
||||
@timeupdate="fnTimeupdate"
|
||||
/>
|
||||
</unitv-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoContext: null,
|
||||
url: "",
|
||||
title: "",
|
||||
time: 0,
|
||||
};
|
||||
},
|
||||
onLoad(query) {
|
||||
this.url = query.url;
|
||||
this.title = query.title;
|
||||
this.time = +query.time;
|
||||
},
|
||||
onReady() {
|
||||
this.videoContext = uni.createVideoContext("player");
|
||||
this.videoContext.play();
|
||||
this.videoContext.seek(this.time);
|
||||
},
|
||||
onUnload() {
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.emit("timeupdate", { time: this.time });
|
||||
},
|
||||
methods: {
|
||||
fnTimeupdate(time) {
|
||||
this.time = time;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -0,0 +1,364 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- <app-loading v-if="loading" />-->
|
||||
<view class="system">
|
||||
<unitv-zone
|
||||
id="course_classification_first_zone"
|
||||
class="course_classification_first_zone"
|
||||
up="tabs_zone"
|
||||
right="course_classification_second_zone"
|
||||
:values="systemList"
|
||||
:column="1"
|
||||
:row="systemList.length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in systemList"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnClickSystem"
|
||||
>
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="search">
|
||||
<view class="block">
|
||||
<view class="main_title">最新</view>
|
||||
<unitv-zone
|
||||
id="course_classification_second_zone"
|
||||
class="search_zone"
|
||||
up="tabs_zone"
|
||||
down="course_classification_third_zone"
|
||||
left="course_classification_first_zone"
|
||||
:values="newestList"
|
||||
:column="newestList.length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in newestList"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnClickSearch($event, 'newestList')"
|
||||
>
|
||||
<view class="title">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="main_title">行业</view>
|
||||
<unitv-zone
|
||||
id="course_classification_third_zone"
|
||||
class="search_zone"
|
||||
up="course_classification_second_zone"
|
||||
down="course_classification_fourth_zone"
|
||||
left="course_classification_first_zone"
|
||||
:values="industryList"
|
||||
:column="industryList.length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in industryList"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnClickSearch($event, 'industryList')"
|
||||
>
|
||||
<view class="title">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="main_title">专区</view>
|
||||
<unitv-zone
|
||||
id="course_classification_fourth_zone"
|
||||
class="search_zone"
|
||||
up="course_classification_third_zone"
|
||||
left="course_classification_first_zone"
|
||||
down="course_classification_fifth_zone"
|
||||
:values="specialZoneList"
|
||||
:column="specialZoneList.length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in specialZoneList"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnClickSearch($event, 'specialZoneList')"
|
||||
>
|
||||
<view class="title">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</view>
|
||||
<unitv-zone
|
||||
id="course_classification_fifth_zone"
|
||||
class="course_classification_fifth_zone"
|
||||
left="course_classification_first_zone"
|
||||
up="course_classification_fourth_zone"
|
||||
:values="list"
|
||||
:column="4"
|
||||
@scrolltolower="fnScrollToLower"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnCurriculumDetails"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
systemList: [
|
||||
{ title: "安全培训" },
|
||||
{ title: "职业健康" },
|
||||
{ title: "工伤预防" },
|
||||
{ title: "职业技能" },
|
||||
{ title: "建筑施工" },
|
||||
{ title: "特种设备" },
|
||||
{ title: "道路运输" },
|
||||
{ title: "专项培训" },
|
||||
],
|
||||
newestList: [{ title: "最新上线" }, { title: "最多播放" }],
|
||||
industryList: [
|
||||
{ title: "高危行业" },
|
||||
{ title: "金属冶炼" },
|
||||
{ title: "煤矿开采" },
|
||||
{ title: "高危行业" },
|
||||
{ title: "金属冶炼" },
|
||||
{ title: "煤矿开采" },
|
||||
{ title: "高危行业" },
|
||||
{ title: "高危行业" },
|
||||
{ title: "金属冶炼" },
|
||||
{ title: "煤矿开采" },
|
||||
{ title: "高危行业" },
|
||||
{ title: "金属冶炼" },
|
||||
{ title: "煤矿开采" },
|
||||
{ title: "高危行业" },
|
||||
],
|
||||
specialZoneList: [{ title: "免费视频" }, { title: "付费视频" }],
|
||||
list: [],
|
||||
// loading: true,
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
async fnGetData() {
|
||||
// setTimeout(() => {
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg1.jpg`),
|
||||
title: "气体基础知识",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg2.jpg`),
|
||||
title: "现场一线员工全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg3.jpg`),
|
||||
title: "出差人员基础安全知识与应急处置",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg4.jpg`),
|
||||
title: "现场安全负责人全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg5.jpg`),
|
||||
title: "《四川省安全生产条例》特色解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg6.jpg`),
|
||||
title: "企业贯彻落实《四川省安全生产条例》精要",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg7.jpg`),
|
||||
title: "《四川省安全生产举报奖励办法》解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg8.jpg`),
|
||||
title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg9.jpg`),
|
||||
title: "危险货物运输包装-气瓶",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg10.jpg`),
|
||||
title: "职业病危害专项治理",
|
||||
});
|
||||
// this.loading = false;
|
||||
// }, 5000);
|
||||
},
|
||||
fnScrollToLower() {
|
||||
this.pagination.currentPage++;
|
||||
if (this.pagination.currentPage <= this.pagination.total)
|
||||
this.fnGetData();
|
||||
},
|
||||
fnClickSystem(event) {
|
||||
console.log(this.systemList[event].title);
|
||||
this.list = [];
|
||||
this.pagination = {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 10,
|
||||
};
|
||||
this.fnGetData();
|
||||
},
|
||||
fnClickSearch(event, key) {
|
||||
console.log(this[key][event].title);
|
||||
this.list = [];
|
||||
this.pagination = {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 10,
|
||||
};
|
||||
this.fnGetData();
|
||||
},
|
||||
fnCurriculumDetails() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/details",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
margin-top: 19rpx;
|
||||
display: flex;
|
||||
|
||||
.system {
|
||||
width: 94rpx;
|
||||
|
||||
.course_classification_first_zone {
|
||||
font-size: 14rpx;
|
||||
text-align: center;
|
||||
|
||||
.item {
|
||||
margin-top: 5rpx;
|
||||
background-color: transparent;
|
||||
border-radius: 34rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
|
||||
&.hover {
|
||||
background-color: #254eff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(37, 78, 255, 0.39);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 34rpx;
|
||||
flex: 1;
|
||||
|
||||
.search {
|
||||
.block {
|
||||
display: flex;
|
||||
margin-top: 5rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main_title {
|
||||
font-size: 10rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 15rpx;
|
||||
padding: 2rpx 0;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.search_zone {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
background-color: transparent;
|
||||
border-radius: 34rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
margin-top: 5rpx;
|
||||
|
||||
.title {
|
||||
font-size: 9rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
background-color: #254eff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(37, 78, 255, 0.39);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course_classification_fifth_zone {
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 130rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
height: 117rpx;
|
||||
margin-top: 14rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:not(:nth-child(n + 5)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:nth-child(4n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- <app-loading v-if="loading" />-->
|
||||
<view class="top">
|
||||
<unitv-zone
|
||||
id="home_first_zone"
|
||||
class="home_first_zone"
|
||||
up="tabs_zone"
|
||||
down="home_third_zone"
|
||||
:values="list.slice(0, 2)"
|
||||
:column="list.slice(0, 2).length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list.slice(0, 2)"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnNavigate('/pages/curriculum/details')"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="left">
|
||||
<unitv-zone
|
||||
id="home_third_zone"
|
||||
class="home_third_zone"
|
||||
up="home_first_zone"
|
||||
right="home_fourth_zone"
|
||||
:values="[0, 1]"
|
||||
:column="1"
|
||||
:row="2"
|
||||
>
|
||||
<unitv-item
|
||||
:item="0"
|
||||
class="item"
|
||||
@click="fnNavigate('/pages/mine/curriculum/index?tabIndex=1')"
|
||||
>
|
||||
<image src="/static/xuexi.png" mode="widthFix" />
|
||||
</unitv-item>
|
||||
<unitv-item
|
||||
:item="1"
|
||||
class="item"
|
||||
@click="fnNavigate('/pages/mine/curriculum/index?tabIndex=2')"
|
||||
>
|
||||
<image src="/static/examination.png" mode="widthFix" />
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="right">
|
||||
<unitv-zone
|
||||
id="home_fourth_zone"
|
||||
class="home_fourth_zone"
|
||||
up="home_first_zone"
|
||||
left="home_third_zone"
|
||||
:values="list.slice(2)"
|
||||
:column="list.slice(2).length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list.slice(2)"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnNavigate('/pages/curriculum/details')"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// loading: true,
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
async fnGetData() {
|
||||
// setTimeout(() => {
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg1.jpg`),
|
||||
title: "气体基础知识",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg2.jpg`),
|
||||
title: "现场一线员工全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg3.jpg`),
|
||||
title: "出差人员基础安全知识与应急处置",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg4.jpg`),
|
||||
title: "现场安全负责人全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg5.jpg`),
|
||||
title: "《四川省安全生产条例》特色解读",
|
||||
});
|
||||
// this.loading = false;
|
||||
// }, 5000);
|
||||
},
|
||||
fnNavigate(url) {
|
||||
uni.navigateTo({ url });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
padding-top: 19rpx;
|
||||
|
||||
.home_first_zone {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
width: 335rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
height: 169rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 10rpx;
|
||||
color: #fff;
|
||||
font-size: 12rpx;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 175rpx;
|
||||
|
||||
.home_third_zone {
|
||||
.item {
|
||||
margin-top: 10rpx;
|
||||
width: 100%;
|
||||
border-radius: 4rpx;
|
||||
height: 57rpx;
|
||||
text-align: center;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 11rpx;
|
||||
flex: 1;
|
||||
|
||||
.home_fourth_zone {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
width: 159rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
height: 117rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<unitv-page
|
||||
id="indexPage"
|
||||
ref="indexPage"
|
||||
class="indexPage"
|
||||
:show="true"
|
||||
@back="pageBack"
|
||||
>
|
||||
<app-header />
|
||||
<unitv-zone
|
||||
id="tabs_zone"
|
||||
class="tabs_zone"
|
||||
:auto-fous="true"
|
||||
up="header_zone"
|
||||
:down="tabsZoneDown"
|
||||
:item="0"
|
||||
:values="tabs"
|
||||
:column="tabs.length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@hover="fnHoverTabs"
|
||||
>
|
||||
<view>{{ item.name }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
<home v-if="currentTab === 0" />
|
||||
<premium-recommendation v-if="currentTab === 1" />
|
||||
<course-classification v-if="currentTab === 2" />
|
||||
</unitv-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Home from "./home.vue";
|
||||
import PremiumRecommendation from "./premium_recommendation.vue";
|
||||
import CourseClassification from "./course_classification.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Home,
|
||||
PremiumRecommendation,
|
||||
CourseClassification,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [{ name: "首页" }, { name: "精品推荐" }, { name: "课程分类" }],
|
||||
currentTab: 0,
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (this.$refs.indexPage) {
|
||||
this.$refs.indexPage.showPage();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabsZoneDown() {
|
||||
if (this.currentTab === 0) return "home_first_zone";
|
||||
if (this.currentTab === 1) return "premium_recommendation_first_zone";
|
||||
if (this.currentTab === 2) return "course_classification_first_zone";
|
||||
return "";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
pageBack() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否退出",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
plus.runtime.quit();
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
},
|
||||
fnHoverTabs(item) {
|
||||
this.currentTab = item;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
.indexPage {
|
||||
.tabs_zone {
|
||||
font-size: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
.item {
|
||||
background-color: transparent;
|
||||
border-radius: 34rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
background-color: #254eff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(37, 78, 255, 0.39);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- <app-loading v-if="loading" />-->
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<unitv-zone
|
||||
id="premium_recommendation_first_zone"
|
||||
class="premium_recommendation_first_zone"
|
||||
up="tabs_zone"
|
||||
right="premium_recommendation_second_zone"
|
||||
down="premium_recommendation_third_zone"
|
||||
:values="list.slice(0, 2)"
|
||||
:column="list.slice(0, 2).length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list.slice(0, 2)"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnCurriculumDetails"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view class="right">
|
||||
<unitv-zone
|
||||
id="premium_recommendation_second_zone"
|
||||
class="premium_recommendation_second_zone"
|
||||
up="tabs_zone"
|
||||
left="premium_recommendation_first_zone"
|
||||
down="premium_recommendation_third_zone"
|
||||
:values="list.slice(2, 4)"
|
||||
:column="1"
|
||||
:row="list.slice(2, 4).length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list.slice(2, 4)"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnCurriculumDetails"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<unitv-zone
|
||||
id="premium_recommendation_third_zone"
|
||||
class="premium_recommendation_third_zone"
|
||||
up="premium_recommendation_first_zone"
|
||||
:values="list.slice(4)"
|
||||
:column="list.slice(4).length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list.slice(4)"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnCurriculumDetails"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// loading: true,
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
async fnGetData() {
|
||||
// setTimeout(() => {
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg1.jpg`),
|
||||
title: "气体基础知识",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg2.jpg`),
|
||||
title: "现场一线员工全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg3.jpg`),
|
||||
title: "出差人员基础安全知识与应急处置",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg4.jpg`),
|
||||
title: "现场安全负责人全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg5.jpg`),
|
||||
title: "《四川省安全生产条例》特色解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg6.jpg`),
|
||||
title: "企业贯彻落实《四川省安全生产条例》精要",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg7.jpg`),
|
||||
title: "《四川省安全生产举报奖励办法》解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../static/public_images/video_bg8.jpg`),
|
||||
title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||||
});
|
||||
// this.loading = false;
|
||||
// }, 5000);
|
||||
},
|
||||
fnCurriculumDetails() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/details",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
padding-top: 19rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 510rpx;
|
||||
height: 169rpx;
|
||||
|
||||
.premium_recommendation_first_zone {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
width: 164rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
height: 169rpx;
|
||||
|
||||
&:first-child {
|
||||
width: 335rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 11rpx;
|
||||
flex: 1;
|
||||
|
||||
.premium_recommendation_second_zone {
|
||||
.item {
|
||||
width: 164rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
height: 81rpx;
|
||||
margin-top: 7rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.premium_recommendation_third_zone {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
width: 159rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
height: 117rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<unitv-page id="loginPage" ref="loginPage" class="loginPage" :show="true">
|
||||
<app-header :is-show-user-info="false" />
|
||||
<view class="main_title">
|
||||
<text>登录可享</text>
|
||||
<text>3</text>
|
||||
<text>大权益</text>
|
||||
</view>
|
||||
<view class="rights_and_interests">
|
||||
<view class="item">
|
||||
<view class="icon">
|
||||
<image src="/static/1080P.png" style="width: 17rpx; height: 9rpx" />
|
||||
</view>
|
||||
<view class="title">尊享1080P画质</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="icon">
|
||||
<image
|
||||
src="/static/w_yunduan.png"
|
||||
style="width: 16rpx; height: 11rpx"
|
||||
/>
|
||||
</view>
|
||||
<view class="title">同步云端观看历史</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="icon">
|
||||
<image src="/static/fuli.png" style="width: 12rpx; height: 12rpx" />
|
||||
</view>
|
||||
<view class="title">福利活动享不停</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex">
|
||||
<view class="login_methods">
|
||||
<view class="item">
|
||||
<view class="icon">
|
||||
<image
|
||||
src="/static/scan_login.png"
|
||||
style="width: 33rpx; height: 33rpx"
|
||||
/>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="title">扫码登录</view>
|
||||
<view class="subtitle">使用手机扫码授权</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode">
|
||||
<view class="image">
|
||||
<canvas
|
||||
id="qrcode"
|
||||
canvas-id="qrcode"
|
||||
:style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</unitv-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UQRCode from "uqrcodejs";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvasSize: uni.upx2px(170),
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (this.$refs.loginPage) {
|
||||
this.$refs.loginPage.showPage();
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
const qr = new UQRCode();
|
||||
qr.data = "qrcode_url";
|
||||
qr.size = this.canvasSize;
|
||||
qr.make();
|
||||
qr.canvasContext = uni.createCanvasContext("qrcode");
|
||||
qr.drawCanvas();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
.main_title {
|
||||
margin-top: 10rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
text:nth-child(2) {
|
||||
color: rgba(0, 204, 255, 1);
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.rights_and_interests {
|
||||
margin-top: 21rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 18rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 3rpx;
|
||||
font-size: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.login_methods {
|
||||
margin-top: 27rpx;
|
||||
|
||||
.item {
|
||||
width: 359rpx;
|
||||
height: 72rpx;
|
||||
background-image: url("/static/scan_login_bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12rpx;
|
||||
|
||||
.right {
|
||||
margin-left: 14rpx;
|
||||
|
||||
.title {
|
||||
font-size: 14rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
padding-top: 9rpx;
|
||||
font-size: 9rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.17);
|
||||
border-radius: 4px;
|
||||
padding: 12rpx;
|
||||
|
||||
.image {
|
||||
background-color: #fff;
|
||||
padding: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- <app-loading v-if="loading" />-->
|
||||
<unitv-zone
|
||||
id="mine_curriculum_all_first_zone"
|
||||
class="mine_curriculum_all_first_zone"
|
||||
left="tabs_zone"
|
||||
:values="list"
|
||||
:column="4"
|
||||
@scrolltolower="fnScrollToLower"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnCurriculumDetails"
|
||||
>
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
async fnGetData() {
|
||||
// setTimeout(() => {
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg1.jpg`),
|
||||
title: "气体基础知识",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg2.jpg`),
|
||||
title: "现场一线员工全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg3.jpg`),
|
||||
title: "出差人员基础安全知识与应急处置",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg4.jpg`),
|
||||
title: "现场安全负责人全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg5.jpg`),
|
||||
title: "《四川省安全生产条例》特色解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg6.jpg`),
|
||||
title: "企业贯彻落实《四川省安全生产条例》精要",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg7.jpg`),
|
||||
title: "《四川省安全生产举报奖励办法》解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg8.jpg`),
|
||||
title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg9.jpg`),
|
||||
title: "危险货物运输包装-气瓶",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg10.jpg`),
|
||||
title: "职业病危害专项治理",
|
||||
});
|
||||
// this.loading = false;
|
||||
// }, 5000);
|
||||
},
|
||||
fnScrollToLower() {
|
||||
this.pagination.currentPage++;
|
||||
if (this.pagination.currentPage <= this.pagination.total)
|
||||
this.fnGetData();
|
||||
},
|
||||
fnCurriculumDetails() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/details",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mine_curriculum_all_first_zone {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 130rpx;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4rpx;
|
||||
font-size: 0;
|
||||
height: 117rpx;
|
||||
margin-top: 14rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:not(:nth-child(n + 5)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:nth-child(4n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 80%;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 9rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- <app-loading v-if="loading" />-->
|
||||
<unitv-zone
|
||||
id="mine_curriculum_completed_learning_first_zone"
|
||||
class="mine_curriculum_completed_learning_first_zone"
|
||||
left="tabs_zone"
|
||||
:values="list"
|
||||
:column="1"
|
||||
:row="list.length"
|
||||
@scrolltolower="fnScrollToLower"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnCurriculumDetails"
|
||||
>
|
||||
<view class="image">
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="info">
|
||||
<view class="title line-1">{{ item.title }}</view>
|
||||
<view class="button">
|
||||
<button>培训考核</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
async fnGetData() {
|
||||
// setTimeout(() => {
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg1.jpg`),
|
||||
title: "气体基础知识",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg2.jpg`),
|
||||
title: "现场一线员工全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg3.jpg`),
|
||||
title: "出差人员基础安全知识与应急处置",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg4.jpg`),
|
||||
title: "现场安全负责人全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg5.jpg`),
|
||||
title: "《四川省安全生产条例》特色解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg6.jpg`),
|
||||
title: "企业贯彻落实《四川省安全生产条例》精要",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg7.jpg`),
|
||||
title: "《四川省安全生产举报奖励办法》解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg8.jpg`),
|
||||
title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg9.jpg`),
|
||||
title: "危险货物运输包装-气瓶",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg10.jpg`),
|
||||
title: "职业病危害专项治理",
|
||||
});
|
||||
// this.loading = false;
|
||||
// }, 5000);
|
||||
},
|
||||
fnScrollToLower() {
|
||||
this.pagination.currentPage++;
|
||||
if (this.pagination.currentPage <= this.pagination.total)
|
||||
this.fnGetData();
|
||||
},
|
||||
fnCurriculumDetails() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/details",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mine_curriculum_completed_learning_first_zone {
|
||||
.item {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 130rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 6rpx;
|
||||
|
||||
image {
|
||||
border-radius: 6rpx;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.info {
|
||||
height: 100%;
|
||||
padding: 10rpx 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
width: 300rpx;
|
||||
font-size: 14rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
button {
|
||||
width: 70rpx;
|
||||
height: 24rpx;
|
||||
line-height: 24rpx;
|
||||
background-color: rgba(37, 78, 255, 0.4);
|
||||
border-radius: 30rpx;
|
||||
color: #fff;
|
||||
font-size: 9rpx;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hover {
|
||||
.right {
|
||||
.info {
|
||||
.button {
|
||||
button {
|
||||
background-color: #254eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<unitv-page
|
||||
id="mineCurriculumPage"
|
||||
ref="mineCurriculumPage"
|
||||
class="mineCurriculumPage"
|
||||
:show="true"
|
||||
>
|
||||
<app-header />
|
||||
<view class="content">
|
||||
<view class="tabs">
|
||||
<unitv-zone
|
||||
id="tabs_zone"
|
||||
class="tabs_zone"
|
||||
:auto-fous="true"
|
||||
:right="tabsZoneRight"
|
||||
:item="currentTab"
|
||||
:values="tabs"
|
||||
:column="1"
|
||||
:row="tabs.length"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@hover="fnHoverTabs"
|
||||
>
|
||||
<view class="title">{{ item.name }}</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
<view style="flex: 1; margin-left: 33rpx">
|
||||
<all v-if="currentTab === 0" />
|
||||
<learning v-if="currentTab === 1" />
|
||||
<completed-learning v-if="currentTab === 2" />
|
||||
</view>
|
||||
</view>
|
||||
</unitv-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import All from "./all.vue";
|
||||
import Learning from "./learning.vue";
|
||||
import CompletedLearning from "./completed_learning.vue";
|
||||
export default {
|
||||
components: {
|
||||
All,
|
||||
Learning,
|
||||
CompletedLearning,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [{ name: "全部" }, { name: "学习中" }, { name: "已学完" }],
|
||||
currentTab: 0,
|
||||
};
|
||||
},
|
||||
onLoad(query) {
|
||||
this.currentTab = query.tabIndex ? +query.tabIndex : 0;
|
||||
},
|
||||
onShow() {
|
||||
if (this.$refs.mineCurriculumPage) {
|
||||
this.$refs.mineCurriculumPage.showPage();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabsZoneRight() {
|
||||
if (this.currentTab === 0) return "mine_curriculum_all_first_zone";
|
||||
if (this.currentTab === 1) return "mine_curriculum_learning_first_zone";
|
||||
if (this.currentTab === 2)
|
||||
return "mine_curriculum_completed_learning_first_zone";
|
||||
return "";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fnHoverTabs(item) {
|
||||
this.currentTab = item;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
margin-top: 19rpx;
|
||||
display: flex;
|
||||
|
||||
.tabs {
|
||||
width: 94rpx;
|
||||
|
||||
.tabs_zone {
|
||||
font-size: 14rpx;
|
||||
text-align: center;
|
||||
|
||||
.item {
|
||||
margin-top: 5rpx;
|
||||
background-color: transparent;
|
||||
border-radius: 34rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
|
||||
&.hover {
|
||||
background-color: #254eff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(37, 78, 255, 0.39);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- <app-loading v-if="loading" />-->
|
||||
<unitv-zone
|
||||
id="mine_curriculum_learning_first_zone"
|
||||
class="mine_curriculum_learning_first_zone"
|
||||
left="tabs_zone"
|
||||
:values="list"
|
||||
:column="1"
|
||||
:row="list.length"
|
||||
@scrolltolower="fnScrollToLower"
|
||||
>
|
||||
<unitv-item
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:item="index"
|
||||
class="item"
|
||||
@click="fnCurriculumDetails"
|
||||
>
|
||||
<view class="image">
|
||||
<image :src="item.img" mode="widthFix" />
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="info">
|
||||
<view class="title line-2">{{ item.title }}</view>
|
||||
<view class="progressbar">
|
||||
<liu-progressbar
|
||||
:text-hide="false"
|
||||
:progress="70"
|
||||
ds-color="#24408b"
|
||||
bg-color="#254eff"
|
||||
height="4rpx"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="button">
|
||||
<button>继续学习</button>
|
||||
</view>
|
||||
</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
async fnGetData() {
|
||||
// setTimeout(() => {
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg1.jpg`),
|
||||
title: "气体基础知识",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg2.jpg`),
|
||||
title: "现场一线员工全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg3.jpg`),
|
||||
title: "出差人员基础安全知识与应急处置",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg4.jpg`),
|
||||
title: "现场安全负责人全面安全培训",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg5.jpg`),
|
||||
title: "《四川省安全生产条例》特色解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg6.jpg`),
|
||||
title: "企业贯彻落实《四川省安全生产条例》精要",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg7.jpg`),
|
||||
title: "《四川省安全生产举报奖励办法》解读",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg8.jpg`),
|
||||
title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg9.jpg`),
|
||||
title: "危险货物运输包装-气瓶",
|
||||
});
|
||||
this.list.push({
|
||||
img: require(`../../../static/public_images/video_bg10.jpg`),
|
||||
title: "职业病危害专项治理",
|
||||
});
|
||||
// this.loading = false;
|
||||
// }, 5000);
|
||||
},
|
||||
fnScrollToLower() {
|
||||
this.pagination.currentPage++;
|
||||
if (this.pagination.currentPage <= this.pagination.total)
|
||||
this.fnGetData();
|
||||
},
|
||||
fnCurriculumDetails() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/details",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mine_curriculum_learning_first_zone {
|
||||
.item {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 130rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 6rpx;
|
||||
|
||||
image {
|
||||
border-radius: 6rpx;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.info {
|
||||
height: 100%;
|
||||
padding: 10rpx 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 20rpx;
|
||||
|
||||
button {
|
||||
width: 70rpx;
|
||||
height: 24rpx;
|
||||
line-height: 24rpx;
|
||||
background-color: rgba(37, 78, 255, 0.4);
|
||||
border-radius: 30rpx;
|
||||
color: #fff;
|
||||
font-size: 9rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hover {
|
||||
.button {
|
||||
button {
|
||||
background-color: #254eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<unitv-page id="minePage" ref="minePage" class="minePage" :show="true">
|
||||
<app-header />
|
||||
<view class="content">
|
||||
<view class="info">
|
||||
<view class="user_info">
|
||||
<view class="avatar">
|
||||
<image src="/static/avatar.png" />
|
||||
</view>
|
||||
<view class="username">呀哈哈</view>
|
||||
</view>
|
||||
<view class="statistics">
|
||||
<view class="item">
|
||||
<view class="title">累计开班数量</view>
|
||||
<view>
|
||||
<text class="value">123</text>
|
||||
<text class="label">个</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">累计学员数量</view>
|
||||
<view>
|
||||
<text class="value">456</text>
|
||||
<text class="label">个</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">累计培训课时</view>
|
||||
<view>
|
||||
<text class="value">789</text>
|
||||
<text class="label">个</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<unitv-zone
|
||||
id="mine_first_zone"
|
||||
class="mine_first_zone"
|
||||
:values="[0, 1, 2, 3]"
|
||||
:column="4"
|
||||
auto-fous
|
||||
:item="0"
|
||||
>
|
||||
<unitv-item
|
||||
:item="0"
|
||||
class="item"
|
||||
@click="fnNavigate('/pages/mine/curriculum/index')"
|
||||
>
|
||||
<view class="text">我的课程</view>
|
||||
</unitv-item>
|
||||
<unitv-item :item="1" class="item">
|
||||
<view class="text">学员档案</view>
|
||||
</unitv-item>
|
||||
<unitv-item :item="2" class="item">
|
||||
<view class="text">效果评估报告</view>
|
||||
</unitv-item>
|
||||
<unitv-item :item="3" class="item">
|
||||
<view class="text">定制课申请</view>
|
||||
</unitv-item>
|
||||
<unitv-item :item="4" class="item">
|
||||
<view class="text">问题反馈</view>
|
||||
</unitv-item>
|
||||
</unitv-zone>
|
||||
</view>
|
||||
</unitv-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onShow() {
|
||||
if (this.$refs.minePage) {
|
||||
this.$refs.minePage.showPage();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fnNavigate(url) {
|
||||
uni.navigateTo({ url });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.user_info {
|
||||
display: flex;
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
|
||||
image {
|
||||
width: 71rpx;
|
||||
height: 71rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
padding-top: 20rpx;
|
||||
padding-left: 17rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.statistics {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
background-image: url("/static/statistics_bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 127rpx;
|
||||
height: 66rpx;
|
||||
padding: 13rpx 14rpx;
|
||||
margin-left: 9rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 11rpx;
|
||||
padding-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding-left: 5rpx;
|
||||
font-size: 9rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mine_first_zone {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
padding: 15rpx 11rpx;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 131rpx;
|
||||
height: 65rpx;
|
||||
border: 1rpx solid transparent;
|
||||
border-radius: 4rpx;
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
&:nth-child(#{$i}) {
|
||||
background-image: url("/static/mine_zone#{$i}.png");
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14rpx;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border: 1rpx solid rgba(0, 180, 255, 0.79);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 751 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 837 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 710 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 500 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 627 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 646 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 588 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 888 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 529 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 435 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 706 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 854 B |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
currentPage: null,
|
||||
currentZone: null,
|
||||
allPages: [],
|
||||
},
|
||||
mutations: {
|
||||
pushPage(state, page) {
|
||||
state.allPages[page.id] = page;
|
||||
},
|
||||
switchZone(state, zone) {
|
||||
state.currentZone = zone;
|
||||
},
|
||||
switchPage(state, page) {
|
||||
state.currentPage = page;
|
||||
},
|
||||
showPage(state, pageId) {
|
||||
const page = state.allPages[pageId];
|
||||
page.showPage();
|
||||
},
|
||||
},
|
||||
actions: {},
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// 文字超出几行隐藏，最多5行
|
||||
// 使用超出1行隐藏，如果使用了flex，则需要给父元素设置min-width: 0;
|
||||
@for $i from 1 through 5 {
|
||||
.line-#{$i} {
|
||||
@if $i == 1 {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
} @else {
|
||||
display: -webkit-box !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: $i;
|
||||
-webkit-box-orient: vertical !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-image: linear-gradient(to bottom, #050114, #133682);
|
||||
padding: 18rpx 33rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
$uni-color-theme: #ec2224;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## 1.0.3（2023-06-10）
|
||||
增加插件预览二维码
|
||||
## 1.0.2（2023-04-14）
|
||||
增加示例
|
||||
## 1.0.1（2023-03-30）
|
||||
优化功能
|
||||
## 1.0.0（2023-03-14）
|
||||
初版发布
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="progress-bar" :style="{height: height,backgroundColor:dsColor}" v-if="textInside">
|
||||
<view class="progress" :style="{width: progressWidth, backgroundColor: bgColor,borderRadius: borderRadius}">
|
||||
</view>
|
||||
<span v-if="textHide" class="percentage" :style="{color:color,fontSize:fontSize }">{{ percentage }}%</span>
|
||||
</view>
|
||||
<view class="card-item" v-else>
|
||||
<view class="progress-bar1" :style="{height: height,backgroundColor:dsColor}">
|
||||
<view class="progress1"
|
||||
:style="{width: progressWidth, backgroundColor: bgColor,borderRadius: borderRadius}">
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="textHide" class="percentage1" :style="{color:color,fontSize:fontSize }">{{ percentage }}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
//文字是否内显
|
||||
textInside: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否显示文字
|
||||
textHide: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//当前进度
|
||||
progress: {
|
||||
type: Number,
|
||||
required: true,
|
||||
validator: (value) => value >= 0 && value <= 100,
|
||||
default: 50
|
||||
},
|
||||
//文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
//文字大小
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: '24rpx'
|
||||
},
|
||||
//进度条颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#5cb85c'
|
||||
},
|
||||
//进度条底色颜色
|
||||
dsColor: {
|
||||
type: String,
|
||||
default: '#f2f2f2'
|
||||
},
|
||||
//进度条高度
|
||||
height: {
|
||||
type: String,
|
||||
default: '28rpx'
|
||||
},
|
||||
//进度条圆角弧度
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '8rpx'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
progressWidth() {
|
||||
return `${this.progress}%`
|
||||
},
|
||||
percentage() {
|
||||
return Math.round(this.progress)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: #666;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 24rpx;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.progress-bar1 {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.percentage1 {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.progress1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
### 1、本插件可免费下载使用；
|
||||
### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
|
||||
### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
|
||||
### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
{
|
||||
"id": "liu-progressbar",
|
||||
"displayName": "进度条组件",
|
||||
"version": "1.0.3",
|
||||
"description": "自定义进度条组件，支持设置文字内显、当前进度、文字颜色、文字大小、进度条颜色、进度条底色、进度条高度、进度条圆角弧度",
|
||||
"keywords": [
|
||||
"进度条",
|
||||
"百分比",
|
||||
"进度"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
### liu-progressbar适用于uni-app项目的进度条组件
|
||||
### 本组件目前兼容微信小程序、H5
|
||||
### 本组件支持自定义，支持设置文字内显、当前进度、文字颜色、文字大小、进度条颜色、进度条底色、进度条高度、进度条圆角弧度
|
||||
# --- 扫码预览、关注我们 ---
|
||||
|
||||
## 扫码关注公众号，查看更多插件信息，预览插件效果！
|
||||
|
||||
|
||||
|
||||
### 使用方式
|
||||
``` html
|
||||
<view class="title">文字内显</view>
|
||||
<liu-progressbar :progress="70" color="#FFFFFF" :height="'40rpx'" />
|
||||
<view class="title">文字外显</view>
|
||||
<liu-progressbar :textInside="false" :progress="70" color="#333333" :height="'40rpx'" />
|
||||
<view class="title">自定义高度</view>
|
||||
<liu-progressbar :progress="70" color="#FFFFFF" :height="'25rpx'" />
|
||||
<view class="title">自定义圆角弧度</view>
|
||||
<liu-progressbar :progress="70" color="#FFFFFF" :height="'40rpx'" :borderRadius="'40rpx'" />
|
||||
<view class="title">自定义进度条颜色</view>
|
||||
<liu-progressbar :progress="70" bgColor="red" color="#FFFFFF" :height="'40rpx'" />
|
||||
<view class="title">自定义底色</view>
|
||||
<liu-progressbar :progress="70" dsColor="red" color="#FFFFFF" :height="'40rpx'" />
|
||||
```
|
||||
|
||||
### 属性说明
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|---------------- | ---------------------- | ---------------|
|
||||
| textInside | Boolean | true | 文字是否内显
|
||||
| progress | Number | 50 | 当前进度
|
||||
| color | String | #FFFFFF | 文字颜色
|
||||
| fontSize | String | 24rpx | 文字大小
|
||||
| bgColor | String | #5cb85c | 进度条颜色
|
||||
| dsColor | String | #f2f2f2 | 进度条底色颜色
|
||||
| height | String | 28rpx | 进度条高度
|
||||
| borderRadius | String | 8rpx | 进度条圆角弧度
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
const requestPath = "";
|
||||
function post(url, data = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (data && data.loading !== false) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
}
|
||||
uni.request({
|
||||
url: requestPath + url,
|
||||
data: {
|
||||
...data,
|
||||
},
|
||||
header: {
|
||||
"Content-type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
method: "POST",
|
||||
success: (res) => {
|
||||
if (data && data.loading !== false) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
if (res.data.result === "success") {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg || "系统开小差了",
|
||||
icon: "none",
|
||||
});
|
||||
if (res.data.msg && res.data.msg.indexOf("动火超期") !== -1) {
|
||||
uni.navigateBack();
|
||||
}
|
||||
reject(res.data);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
if (data && data.loading !== false) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
uni.showToast({
|
||||
title: "网络错误请重试",
|
||||
icon: "none",
|
||||
});
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function upload(url, data = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (data && data.loading !== false) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
}
|
||||
uni.uploadFile({
|
||||
url: requestPath + url,
|
||||
filePath: data.filePath,
|
||||
name: data.name || "FFILE",
|
||||
formData:
|
||||
{
|
||||
...data.formData,
|
||||
} || {},
|
||||
success: (res) => {
|
||||
if (data && data.loading !== false) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
if (JSON.parse(res.data).result === "success") {
|
||||
resolve(JSON.parse(res.data));
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: JSON.parse(res.data).msg || "系统开小差了",
|
||||
icon: "none",
|
||||
});
|
||||
reject(JSON.parse(res.data));
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: "网络错误请重试",
|
||||
icon: "none",
|
||||
});
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export { post, upload };
|
||||
Loading…
Reference in New Issue