Skip to content

肖文锋 / micro-lecture

Go to a project
Commit f0637cb3 by xiaowenfeng
Options

1、新增华为云迁移修改

parent 4e11ae05
Inline Side-by-side
Showing with 560 additions and 169 deletions
package.json
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"ali-oss": "^6.11.2",
"axios": "^0.20.0", "axios": "^0.20.0",
"babel-plugin-import": "^1.13.0", "babel-plugin-import": "^1.13.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"esdk-obs-browserjs": "^3.20.7",
"js-audio-recorder": "^1.0.6", "js-audio-recorder": "^1.0.6",
"kim-vue-touch": "^1.1.5", "kim-vue-touch": "^1.1.5",
"lamejs": "^1.2.0", "lamejs": "^1.2.0",
......
src/App.vue
<!--
* @Author: your name
* @Date: 2020-08-18 14:52:43
* @LastEditTime: 2021-04-23 15:41:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /micro-lecture/src/App.vue
-->
<template> <template>
<div id="app"> <div id="app">
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script> <script>
// import VConsole from 'vconsole/dist/vconsole.min.js' // import VConsole from 'vconsole/dist/vconsole.min.js'
// const vConsole = new VConsole() // const vConsole = new VConsole()
// console.log('vConsole:', vConsole) // console.log('vConsole:', vConsole)
export default {
}
</script> </script>
<style lang="scss"> <style lang="scss">
@import url("./css/common.css"); @import url('./css/common.css');
html { html {
font-size: 100px; font-size: 100px;
} }
......
src/components/MicroEdit.vue
<template> <template>
<div id="microBox"> <div id="microBox">
<div class="micro-top"> <div class="micro-top">
<div class="micro-upload" v-if="pages.length === 0"> <div
<div class="file-input-box" @click="uploadClick"> class="micro-upload"
v-if="pages.length === 0"
>
<div
class="file-input-box"
@click="uploadClick"
>
<div class="file-input-select"> <div class="file-input-select">
<i class="iconfont">&#xe654;&nbsp;上传课件</i> <i class="iconfont">&#xe654;&nbsp;上传课件</i>
</div> </div>
...@@ -16,24 +22,41 @@ ...@@ -16,24 +22,41 @@
v-show="false" v-show="false"
/> />
</div> </div>
<div class="micro-img-preview" ref="imgPreview"> <div
class="micro-img-preview"
ref="imgPreview"
>
<div class="reveal"> <div class="reveal">
<div class="slides" ref="slides"> <div
class="slides"
ref="slides"
>
<section <section
v-for="(item, index) in pages" v-for="(item, index) in pages"
:key="index" :key="index"
:data-transition="item.transitions.in + ' ' + item.transitions.out" :data-transition="item.transitions.in + ' ' + item.transitions.out"
:style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')' }" :style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')' }"
@click="edit(index)"> @click="edit(index)"
>
<p v-show="!!item.text">{{item.text}}</p> <p v-show="!!item.text">{{item.text}}</p>
</section> </section>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<transition name="slide-fade" mode="out-in"> <transition
<div class="micro-middle" v-show="!isEdit"> name="slide-fade"
<swiper ref="swiperThumbs" class="gallery-thumbs" :options="swiperThumbs"> mode="out-in"
>
<div
class="micro-middle"
v-show="!isEdit"
>
<swiper
ref="swiperThumbs"
class="gallery-thumbs"
:options="swiperThumbs"
>
<swiper-slide <swiper-slide
v-for="(item, index) in pages" v-for="(item, index) in pages"
class="swiper-slide" class="swiper-slide"
...@@ -42,29 +65,67 @@ ...@@ -42,29 +65,67 @@
> >
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<div class="swiper-button-next swiper-button-white" v-show="device.android ? false : device.ios ? false : true" @click="changPageIndex('down')"></div> <div
<div class="swiper-button-prev swiper-button-white" v-show="device.android ? false : device.ios ? false : true" @click="changPageIndex('up')"></div> class="swiper-button-next swiper-button-white"
v-show="device.android ? false : device.ios ? false : true"
@click="changPageIndex('down')"
></div>
<div
class="swiper-button-prev swiper-button-white"
v-show="device.android ? false : device.ios ? false : true"
@click="changPageIndex('up')"
></div>
</div> </div>
</transition> </transition>
<transition name="slide-fade" mode="out-in"> <transition
<div class="micro-bottom" v-show="!isEdit"> name="slide-fade"
mode="out-in"
>
<div
class="micro-bottom"
v-show="!isEdit"
>
<button class="page-message">页码:{{activeIndex+1}}/{{pages.length}}</button> <button class="page-message">页码:{{activeIndex+1}}/{{pages.length}}</button>
<div class="page-button-wrap"> <div class="page-button-wrap">
<!-- <button @click="publish" v-show="buildStatus.current === buildStatus.status.finish">发布</button> <!-- <button @click="publish" v-show="buildStatus.current === buildStatus.status.finish">发布</button>
<button @click="finish" v-show="buildStatus.current === buildStatus.status.parsingComplete">提交</button> --> <button @click="finish" v-show="buildStatus.current === buildStatus.status.parsingComplete">提交</button> -->
<button @click="preview" v-show="!token">预览</button> <button
@click="preview"
v-show="!token"
>预览</button>
<button @click="closeEdit"><span>退出</span></button> <button @click="closeEdit"><span>退出</span></button>
</div> </div>
</div> </div>
</transition> </transition>
<transition name="slide-fade" mode="out-in"> <transition
<div class="edit" v-show="isEdit"> name="slide-fade"
<div class="editBottom" :style="{width: editBottomWith + 'px'}"> mode="out-in"
>
<div
class="edit"
v-show="isEdit"
>
<div
class="editBottom"
:style="{width: editBottomWith + 'px'}"
>
<div class="editStatus"> <div class="editStatus">
<button @click="changeEditStatus(editStatus.playTime)" :class="currentEditStatus === editStatus.playTime ? 'button-active' : ''">时长</button> <button
<button @click="changeEditStatus(editStatus.editText)" :class="currentEditStatus === editStatus.editText ? 'button-active' : ''">字幕</button> @click="changeEditStatus(editStatus.playTime)"
<button @click="changeEditStatus(editStatus.editToggle)" :class="currentEditStatus === editStatus.editToggle ? 'button-active' : ''">切换</button> :class="currentEditStatus === editStatus.playTime ? 'button-active' : ''"
<button @click="changeEditStatus(editStatus.recorder)" :class="currentEditStatus === editStatus.recorder ? 'button-active' : ''">录音</button> >时长</button>
<button
@click="changeEditStatus(editStatus.editText)"
:class="currentEditStatus === editStatus.editText ? 'button-active' : ''"
>字幕</button>
<button
@click="changeEditStatus(editStatus.editToggle)"
:class="currentEditStatus === editStatus.editToggle ? 'button-active' : ''"
>切换</button>
<button
@click="changeEditStatus(editStatus.recorder)"
:class="currentEditStatus === editStatus.recorder ? 'button-active' : ''"
>录音</button>
</div> </div>
<input <input
type="text" type="text"
...@@ -75,53 +136,176 @@ ...@@ -75,53 +136,176 @@
v-if="isEdit && currentEditStatus === editStatus.editText" v-if="isEdit && currentEditStatus === editStatus.editText"
v-model="pages[editIndex].text" v-model="pages[editIndex].text"
maxlength="27" maxlength="27"
placeholder="不多于27字" /> placeholder="不多于27字"
<div class="toggle" v-if="isEdit && currentEditStatus === editStatus.editToggle"> />
<div
class="toggle"
v-if="isEdit && currentEditStatus === editStatus.editToggle"
>
<div class="toggleSelect"> <div class="toggleSelect">
<span>进入:</span> <span>进入:</span>
<select v-model="pages[editIndex].transitions.in" @blur="selectBlure" > <select
<option :value ="item.in.type" v-for="(item, index) in transitions" :key="index">{{item.in.name}}</option> v-model="pages[editIndex].transitions.in"
@blur="selectBlure"
>
<option
:value="item.in.type"
v-for="(item, index) in transitions"
:key="index"
>{{item.in.name}}</option>
</select> </select>
</div> </div>
<div class="toggleSelect"> <div class="toggleSelect">
<span>离开:</span> <span>离开:</span>
<select v-model="pages[editIndex].transitions.out" @blur="selectBlure" > <select
<option :value ="item.out.type" v-for="(item, index) in transitions" :key="index">{{item.out.name}}</option> v-model="pages[editIndex].transitions.out"
@blur="selectBlure"
>
<option
:value="item.out.type"
v-for="(item, index) in transitions"
:key="index"
>{{item.out.name}}</option>
</select> </select>
</div> </div>
</div> </div>
<div class="recorder" v-show="isEdit && currentEditStatus === editStatus.recorder"> <div
class="recorder"
v-show="isEdit && currentEditStatus === editStatus.recorder"
>
<div class="recorderStatus"> <div class="recorderStatus">
<div class="timeRemaining"> <div class="timeRemaining">
<i v-show="!isRecording" class="iconfont">&#xe60e;</i> <i
<svg v-show="isRecording" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve"> v-show="!isRecording"
<rect x="0" y="9.22656" width="4" height="12.5469" fill="#909090"> class="iconfont"
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate> >&#xe60e;</i>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate> <svg
v-show="isRecording"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 24 30"
style="enable-background:new 0 0 50 50"
xml:space="preserve"
>
<rect
x="0"
y="9.22656"
width="4"
height="12.5469"
fill="#909090"
>
<animate
attributeName="height"
attributeType="XML"
values="5;21;5"
begin="0s"
dur="0.6s"
repeatCount="indefinite"
></animate>
<animate
attributeName="y"
attributeType="XML"
values="13; 5; 13"
begin="0s"
dur="0.6s"
repeatCount="indefinite"
></animate>
</rect> </rect>
<rect x="10" y="5.22656" width="4" height="20.5469" fill="#909090"> <rect
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate> x="10"
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate> y="5.22656"
width="4"
height="20.5469"
fill="#909090"
>
<animate
attributeName="height"
attributeType="XML"
values="5;21;5"
begin="0.15s"
dur="0.6s"
repeatCount="indefinite"
></animate>
<animate
attributeName="y"
attributeType="XML"
values="13; 5; 13"
begin="0.15s"
dur="0.6s"
repeatCount="indefinite"
></animate>
</rect> </rect>
<rect x="20" y="8.77344" width="4" height="13.4531" fill="#909090"> <rect
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate> x="20"
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate> y="8.77344"
width="4"
height="13.4531"
fill="#909090"
>
<animate
attributeName="height"
attributeType="XML"
values="5;21;5"
begin="0.3s"
dur="0.6s"
repeatCount="indefinite"
></animate>
<animate
attributeName="y"
attributeType="XML"
values="13; 5; 13"
begin="0.3s"
dur="0.6s"
repeatCount="indefinite"
></animate>
</rect> </rect>
</svg> </svg>
</div> </div>
<div class="timeCompute">{{timeRemaining}}</div> <div class="timeCompute">{{timeRemaining}}</div>
</div> </div>
<button class="trialSeeding" v-show="isEdit && pages[editIndex].audioSrc" @click="testAudio"> <button
<i v-show="!isPlaying" class="iconfont">&#xe77e;</i> class="trialSeeding"
<i v-show="isPlaying" class="iconfont">&#xe60e;</i> v-show="isEdit && pages[editIndex].audioSrc"
@click="testAudio"
>
<i
v-show="!isPlaying"
class="iconfont"
>&#xe77e;</i>
<i
v-show="isPlaying"
class="iconfont"
>&#xe60e;</i>
</button> </button>
<button class="ivu-btn ivu-btn-default" @click="recorderClick"> <button
<i v-show="isRecording" class="iconfont">&#xe62e;</i> class="ivu-btn ivu-btn-default"
<i v-show="!isRecording" class="iconfont">&#xe62f;</i> @click="recorderClick"
>
<i
v-show="isRecording"
class="iconfont"
>&#xe62e;</i>
<i
v-show="!isRecording"
class="iconfont"
>&#xe62f;</i>
</button> </button>
<audio v-show="false" controls="controls" :src="isEdit ? baseSourceUrl + pages[editIndex].audioSrc : ''" ref="audioTest" @playing="playing" @ended="playEnded" @pause="playPause"></audio> <audio
v-show="false"
controls="controls"
:src="isEdit ? baseSourceUrl + pages[editIndex].audioSrc : ''"
ref="audioTest"
@playing="playing"
@ended="playEnded"
@pause="playPause"
></audio>
</div> </div>
<div class="playTime" v-if="isEdit && currentEditStatus === editStatus.playTime"> <div
class="playTime"
v-if="isEdit && currentEditStatus === editStatus.playTime"
>
<div class="playInput"> <div class="playInput">
<input <input
type="text" type="text"
...@@ -133,48 +317,125 @@ ...@@ -133,48 +317,125 @@
:placeholder="'小于' + maxRecorderLength + '秒'" :placeholder="'小于' + maxRecorderLength + '秒'"
:class="isInputFocus && (device.android || device.ios) ? 'playInputFixed' : 'playInputStatic'" :class="isInputFocus && (device.android || device.ios) ? 'playInputFixed' : 'playInputStatic'"
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" /> onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
<button @mouseup="mouseupButton('add')" @mousedown="mousedownButton('add')" @mouseleave="mouseleaveButton">+</button> />
<button @mouseup="mouseupButton('decrease')" @mousedown="mousedownButton('decrease')" @mouseleave="mouseleaveButton">-</button> <button
@mouseup="mouseupButton('add')"
@mousedown="mousedownButton('add')"
@mouseleave="mouseleaveButton"
>+</button>
<button
@mouseup="mouseupButton('decrease')"
@mousedown="mousedownButton('decrease')"
@mouseleave="mouseleaveButton"
>-</button>
</div> </div>
<div class="playTimeUnit">/ 秒</div> <div class="playTimeUnit">/ 秒</div>
</div> </div>
</div> </div>
</div> </div>
</transition> </transition>
<div class="micro-shadow" @click="inputBlur" v-show="isInputFocus && (device.android || device.ios)"></div> <div
<div class="no-micro-lecture" v-if="pages.length === 0"> class="micro-shadow"
<div class="no-micro-lecture-tips" v-show="currentUploadStatus === uploadStatus.normal"><i class="iconfont">&#xe602;&nbsp;</i>请先上传课程</div> @click="inputBlur"
<div class="no-micro-lecture-uploading" v-show="currentUploadStatus === uploadStatus.upload"> v-show="isInputFocus && (device.android || device.ios)"
<div class="no-micro-lecture-uploading-trance" :style="{width: uploadProgress}"></div> ></div>
<br/> <div
class="no-micro-lecture"
v-if="pages.length === 0"
>
<div
class="no-micro-lecture-tips"
v-show="currentUploadStatus === uploadStatus.normal"
><i class="iconfont">&#xe602;&nbsp;</i>请先上传课程</div>
<div
class="no-micro-lecture-uploading"
v-show="currentUploadStatus === uploadStatus.upload"
>
<div
class="no-micro-lecture-uploading-trance"
:style="{width: uploadProgress}"
></div>
<br />
上传中&nbsp;({{uploadProgress}})··· 上传中&nbsp;({{uploadProgress}})···
</div> </div>
<div class="no-micro-lecture-tips" v-show="currentUploadStatus === uploadStatus.transcoding"> <div
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"> class="no-micro-lecture-tips"
<path fill="#909090" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)"> v-show="currentUploadStatus === uploadStatus.transcoding"
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform> >
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="30px"
height="30px"
viewBox="0 0 50 50"
style="enable-background:new 0 0 50 50"
xml:space="preserve"
>
<path
fill="#909090"
d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
transform="rotate(275.098 25 25)"
>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"
></animateTransform>
</path> </path>
</svg> </svg>
<br/> <br />
<span v-show="buildStatus.current === buildStatus.status.initial">等待解析</span> <span v-show="buildStatus.current === buildStatus.status.initial">等待解析</span>
<span v-show="buildStatus.current === buildStatus.status.parsing">正在解析</span> <span v-show="buildStatus.current === buildStatus.status.parsing">正在解析</span>
<span v-show="buildStatus.current === buildStatus.status.parsingComplete">解析完成</span> <span v-show="buildStatus.current === buildStatus.status.parsingComplete">解析完成</span>
<span v-show="buildStatus.current === buildStatus.status.fail">解析失败，请重新上传</span> <span v-show="buildStatus.current === buildStatus.status.fail">解析失败，请重新上传</span>
</div> </div>
</div> </div>
<div class="loadingImg" v-show="isSubmit"> <div
<img src="../assets/loading-icon.gif" alt="loading"> class="loadingImg"
v-show="isSubmit"
>
<img
src="../assets/loading-icon.gif"
alt="loading"
>
</div> </div>
<div class="initLoading" v-if="initStatus.isInit"> <div
class="initLoading"
v-if="initStatus.isInit"
>
<div v-show="!initStatus.isError"> <div v-show="!initStatus.isError">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"> <svg
<path fill="#909090" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)"> xmlns="http://www.w3.org/2000/svg"
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform> xmlns:xlink="http://www.w3.org/1999/xlink"
width="30px"
height="30px"
viewBox="0 0 50 50"
style="enable-background:new 0 0 50 50"
xml:space="preserve"
>
<path
fill="#909090"
d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
transform="rotate(275.098 25 25)"
>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"
></animateTransform>
</path> </path>
</svg> </svg>
<br/> <br />
<br/> <br />
正在初始化··· 正在初始化···
</div> </div>
<div v-show="initStatus.isError"> <div v-show="initStatus.isError">
...@@ -183,17 +444,50 @@ ...@@ -183,17 +444,50 @@
</div> </div>
<mt-popup <mt-popup
v-model="popupVisible" v-model="popupVisible"
position="bottom"> position="bottom"
<mt-field label="课程名称" placeholder="请输入课程名称" :attr="{ maxlength: 100}" v-model="microLectureTitle"></mt-field> >
<mt-field label="课程简介" placeholder="课程简介" type="textarea" rows="4" :attr="{ maxlength: 1000, style: 'resize: none' }" v-model="introduction"></mt-field> <mt-field
<div class="hangdleBox" v-for="(item, index) in lectureClassify" :key="index"> label="课程名称"
<i-select style="width:200px" @on-change="selectClassify"> placeholder="请输入课程名称"
<i-option v-for="i in lectureClassify[index]" :value="i.value" :key="i.value" :label="i.label">{{ i.label }}</i-option> :attr="{ maxlength: 100}"
v-model="microLectureTitle"
></mt-field>
<mt-field
label="课程简介"
placeholder="课程简介"
type="textarea"
rows="4"
:attr="{ maxlength: 1000, style: 'resize: none' }"
v-model="introduction"
></mt-field>
<div
class="hangdleBox"
v-for="(item, index) in lectureClassify"
:key="index"
>
<i-select
style="width:200px"
@on-change="selectClassify"
>
<i-option
v-for="i in lectureClassify[index]"
:value="i.value"
:key="i.value"
:label="i.label"
>{{ i.label }}</i-option>
</i-select> </i-select>
</div> </div>
<div class="hangdleBox"> <div class="hangdleBox">
<button v-show="!canPublish" class="ivu-btn ivu-btn-default" disabled><span>发布</span></button> <button
<button v-show="canPublish" class="ivu-btn ivu-btn-default" @click="lecturePublish"><span>发布</span></button> v-show="!canPublish"
class="ivu-btn ivu-btn-default"
disabled
><span>发布</span></button>
<button
v-show="canPublish"
class="ivu-btn ivu-btn-default"
@click="lecturePublish"
><span>发布</span></button>
</div> </div>
</mt-popup> </mt-popup>
</div> </div>
...@@ -210,7 +504,7 @@ import '../../node_modules/reveal.js/dist/theme/black.css' ...@@ -210,7 +504,7 @@ import '../../node_modules/reveal.js/dist/theme/black.css'
import 'view-design/dist/styles/iview.css' import 'view-design/dist/styles/iview.css'
import convertToMp3 from '../lib/converToMp3' import convertToMp3 from '../lib/converToMp3'
import axios from 'axios' import axios from 'axios'
import OSS from 'ali-oss' import ObsClient from 'esdk-obs-browserjs'
import SparkMD5 from 'spark-md5' import SparkMD5 from 'spark-md5'
import { Toast, MessageBox, Field, Popup } from 'mint-ui' import { Toast, MessageBox, Field, Popup } from 'mint-ui'
import { Select, Option, Button } from 'view-design' import { Select, Option, Button } from 'view-design'
...@@ -231,7 +525,7 @@ export default { ...@@ -231,7 +525,7 @@ export default {
data () { data () {
return { return {
pages: [], // 课程数据结构，或者可以成为课程描述文件 pages: [], // 课程数据结构，或者可以成为课程描述文件
baseSourceUrl: 'https://res.qida.com/', // 图片、语音的域名 baseSourceUrl: 'https://course.qida.com.cn', // 图片、语音的域名
currentUploadStatus: 'normal', // 上传的状态 currentUploadStatus: 'normal', // 上传的状态
uploadStatus: { uploadStatus: {
upload: 'upload', upload: 'upload',
...@@ -486,7 +780,7 @@ export default { ...@@ -486,7 +780,7 @@ export default {
}) })
}, },
getPages (coursewareDir, microId) { getPages (coursewareDir, microId) {
const url = 'https://qida-videos.oss-cn-shenzhen.aliyuncs.com/' + coursewareDir + '/content.json' const url = 'https://qida-course.obs.cn-south-1.myhuaweicloud.com/' + coursewareDir + '/content.json'
this.microId = microId this.microId = microId
axios.get(url).then((res) => { axios.get(url).then((res) => {
this.pageInit(res.data) this.pageInit(res.data)
...@@ -840,38 +1134,72 @@ export default { ...@@ -840,38 +1134,72 @@ export default {
loadNext(file) loadNext(file)
}, },
getOssToken (data, file) { getOssToken (data, file) {
this.compatibleApi(data, 'ossToken').then((res) => { this.compatibleApi(data, 'ossToken').then((result) => {
const client = new OSS(res.data) const res = result.data
const objectKey = res.data.audioPath const obsClient = new ObsClient({
access_key_id: res.accessKeyId,
secret_access_key: res.accessKeySecret,
server: window.location.protocol + '//' + res.endpoint
})
obsClient.util.securityToken = res.securityToken
const params = new URLSearchParams() const params = new URLSearchParams()
params.append('id', this.microId) params.append('id', this.microId)
params.append('pageNum', this.pages[this.editIndex].pageNum) params.append('pageNum', this.pages[this.editIndex].pageNum)
var that = this const that = this
async function multipartUpload () {
try { obsClient.putObject({
const result = await client.multipartUpload(objectKey, file, { Bucket: res.bucketName,
progress: (p, checkpoint) => { Key: res.audioPath,
// console.log(p) SourceFile: file
// console.log(checkpoint) }, (err, result) => {
} if (err) {
})
// console.log('result:', result)
if (result.res.status === 200) {
params.append('fileStatus', 'S')
that.upLoadRecord(params)
} else {
params.append('fileStatus', 'F') params.append('fileStatus', 'F')
that.upLoadRecord(params) that.upLoadRecord(params)
MessageBox('提示', '保存失败！') MessageBox('提示', '保存失败！')
} } else {
} catch (e) { if (result.CommonMsg.Status === 200) {
params.append('fileStatus', 'S')
that.upLoadRecord(params)
} else {
params.append('fileStatus', 'F') params.append('fileStatus', 'F')
that.upLoadRecord(params) that.upLoadRecord(params)
MessageBox('提示', '保存失败！') MessageBox('提示', '保存失败！')
// console.log(e)
} }
} }
multipartUpload() })
// const client = new OSS(res.data)
// const objectKey = res.data.audioPath
// const params = new URLSearchParams()
// params.append('id', this.microId)
// params.append('pageNum', this.pages[this.editIndex].pageNum)
// var that = this
// async function multipartUpload () {
// try {
// const result = await client.multipartUpload(objectKey, file, {
// progress: (p, checkpoint) => {
// // console.log(p)
// // console.log(checkpoint)
// }
// })
// // console.log('result:', result)
// if (result.res.status === 200) {
// params.append('fileStatus', 'S')
// that.upLoadRecord(params)
// } else {
// params.append('fileStatus', 'F')
// that.upLoadRecord(params)
// MessageBox('提示', '保存失败！')
// }
// } catch (e) {
// params.append('fileStatus', 'F')
// that.upLoadRecord(params)
// MessageBox('提示', '保存失败！')
// // console.log(e)
// }
// }
// multipartUpload()
}) })
}, },
upLoadRecord (data) { upLoadRecord (data) {
...@@ -1077,7 +1405,7 @@ $borderColor: #5a5a5a; ...@@ -1077,7 +1405,7 @@ $borderColor: #5a5a5a;
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
position:relative; position: relative;
background: $backgroundColor !important; background: $backgroundColor !important;
} }
...@@ -1089,7 +1417,7 @@ li { ...@@ -1089,7 +1417,7 @@ li {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate3d(-50%,-50%,0); transform: translate3d(-50%, -50%, 0);
background-color: #fff; background-color: #fff;
width: 85%; width: 85%;
max-width: 500px; max-width: 500px;
...@@ -1099,11 +1427,11 @@ li { ...@@ -1099,11 +1427,11 @@ li {
overflow: hidden; overflow: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
transition: .2s; transition: 0.2s;
} }
#microBox { #microBox {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: 'Source Sans Pro', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: $fontColor; color: $fontColor;
...@@ -1131,7 +1459,7 @@ li { ...@@ -1131,7 +1459,7 @@ li {
position: fixed; position: fixed;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
background: rgba(0,0,0,0.3); background: rgba(0, 0, 0, 0.3);
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
...@@ -1144,7 +1472,7 @@ li { ...@@ -1144,7 +1472,7 @@ li {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
.no-micro-lecture{ .no-micro-lecture {
width: 100%; width: 100%;
height: 93.6%; height: 93.6%;
background: #000; background: #000;
...@@ -1153,20 +1481,20 @@ li { ...@@ -1153,20 +1481,20 @@ li {
top: 6.4%; top: 6.4%;
text-align: center; text-align: center;
font-size: 0.16rem; font-size: 0.16rem;
.no-micro-lecture-tips{ .no-micro-lecture-tips {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.no-micro-lecture-uploading{ .no-micro-lecture-uploading {
width: 80%; width: 80%;
max-width: 500px; max-width: 500px;
height: 10px; height: 10px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.no-micro-lecture-uploading-trance { .no-micro-lecture-uploading-trance {
height: 50%; height: 50%;
...@@ -1194,12 +1522,13 @@ li { ...@@ -1194,12 +1522,13 @@ li {
/* 可以设置不同的进入和离开动画 */ /* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */ /* 设置持续时间和动画函数 */
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all .3s ease; transition: all 0.3s ease;
} }
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
} }
.slide-fade-enter, .slide-fade-leave-to { .slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px); transform: translateX(10px);
opacity: 0; opacity: 0;
} }
...@@ -1229,7 +1558,7 @@ li { ...@@ -1229,7 +1558,7 @@ li {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
&:hover{ &:hover {
color: #5f5f5f; color: #5f5f5f;
} }
} }
...@@ -1267,7 +1596,7 @@ li { ...@@ -1267,7 +1596,7 @@ li {
transform: translateY(-50%); transform: translateY(-50%);
z-index: 99; z-index: 99;
border-radius: 5px; border-radius: 5px;
&:hover{ &:hover {
color: #2b2b2b; color: #2b2b2b;
} }
} }
...@@ -1281,7 +1610,7 @@ li { ...@@ -1281,7 +1610,7 @@ li {
z-index: 1; z-index: 1;
height: 100%; height: 100%;
background: $backgroundColor; background: $backgroundColor;
.swiper-slide{ .swiper-slide {
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
width: 20%; width: 20%;
...@@ -1335,9 +1664,9 @@ li { ...@@ -1335,9 +1664,9 @@ li {
margin: 0 5px; margin: 0 5px;
cursor: pointer; cursor: pointer;
} }
button:active{ button:active {
background: rgb(78 110 242 / 0.5) !important; background: rgb(78 110 242 / 0.5) !important;
color: #fff !important color: #fff !important;
} }
.page-message { .page-message {
position: absolute; position: absolute;
...@@ -1363,7 +1692,8 @@ li { ...@@ -1363,7 +1692,8 @@ li {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.reveal .slides>section, .reveal .slides>section>section { .reveal .slides > section,
.reveal .slides > section > section {
box-sizing: border-box; box-sizing: border-box;
display: none; display: none;
position: absolute; position: absolute;
...@@ -1372,15 +1702,18 @@ li { ...@@ -1372,15 +1702,18 @@ li {
pointer-events: auto; pointer-events: auto;
z-index: 10; z-index: 10;
transform-style: flat; transform-style: flat;
transition: transform-origin .8s cubic-bezier(.26,.86,.44,.985),transform .8s cubic-bezier(.26,.86,.44,.985),visibility .8s cubic-bezier(.26,.86,.44,.985),opacity .8s cubic-bezier(.26,.86,.44,.985); transition: transform-origin 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985),
transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985),
visibility 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985),
opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985);
} }
.reveal p { .reveal p {
margin: 0; margin: 0;
line-height: 1.3; line-height: 1.3;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
font-size: .12rem; font-size: 0.12rem;
padding: 0.06rem .06rem; padding: 0.06rem 0.06rem;
width: 100%; width: 100%;
background: rgb(0 0 0 / 0.6); background: rgb(0 0 0 / 0.6);
box-sizing: border-box; box-sizing: border-box;
...@@ -1396,9 +1729,9 @@ li { ...@@ -1396,9 +1729,9 @@ li {
font-size: 42px; font-size: 42px;
font-weight: normal; font-weight: normal;
color: #fff; color: #fff;
button:active{ button:active {
background: rgb(78 110 242 / 0.5) !important; background: rgb(78 110 242 / 0.5) !important;
color: #fff !important color: #fff !important;
} }
.editTop { .editTop {
height: 80%; height: 80%;
...@@ -1423,7 +1756,7 @@ li { ...@@ -1423,7 +1756,7 @@ li {
button { button {
font-size: 0.16rem; font-size: 0.16rem;
@media screen and (max-width: 280px) { @media screen and (max-width: 280px) {
font-size: 0.10rem; font-size: 0.1rem;
} }
line-height: initial; line-height: initial;
background: #f6f6f6; background: #f6f6f6;
...@@ -1538,7 +1871,7 @@ li { ...@@ -1538,7 +1871,7 @@ li {
line-height: 30px; line-height: 30px;
height: 100%; height: 100%;
width: 50%; width: 50%;
background: #616161;; background: #616161;
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
text-align: center; text-align: center;
...@@ -1546,7 +1879,7 @@ li { ...@@ -1546,7 +1879,7 @@ li {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.timeCompute{ .timeCompute {
width: 50%; width: 50%;
font-size: 0.14rem; font-size: 0.14rem;
height: 100%; height: 100%;
...@@ -1559,14 +1892,14 @@ li { ...@@ -1559,14 +1892,14 @@ li {
box-sizing: border-box; box-sizing: border-box;
} }
} }
.trialSeeding{ .trialSeeding {
width: 15%; width: 15%;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
font-size: .14rem; font-size: 0.14rem;
color: #000; color: #000;
background: #fff; background: #fff;
text-align: center; text-align: center;
...@@ -1606,7 +1939,7 @@ li { ...@@ -1606,7 +1939,7 @@ li {
z-index: 99; z-index: 99;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width:100% !important; width: 100% !important;
height: 32px; height: 32px;
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
...@@ -1614,7 +1947,7 @@ li { ...@@ -1614,7 +1947,7 @@ li {
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
} }
.playInputStatic { .playInputStatic {
position: static position: static;
} }
button { button {
display: inline-block; display: inline-block;
...@@ -1642,7 +1975,7 @@ li { ...@@ -1642,7 +1975,7 @@ li {
cursor: pointer; cursor: pointer;
} }
} }
.playTimeUnit{ .playTimeUnit {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 30%; width: 30%;
...@@ -1670,10 +2003,15 @@ li { ...@@ -1670,10 +2003,15 @@ li {
right: auto; right: auto;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translate3d(-50%,0,0); transform: translate3d(-50%, 0, 0);
width: 100%; width: 100%;
.mint-cell-wrapper { .mint-cell-wrapper {
background-image: linear-gradient(180deg,#d9d9d9,#d9d9d9 50%,transparent 0); background-image: linear-gradient(
180deg,
#d9d9d9,
#d9d9d9 50%,
transparent 0
);
background-size: 100% 1px; background-size: 100% 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 0; background-position: 0 0;
...@@ -1690,7 +2028,12 @@ li { ...@@ -1690,7 +2028,12 @@ li {
} }
} }
.hangdleBox { .hangdleBox {
background-image: linear-gradient(180deg,#d9d9d9,#d9d9d9 100%,transparent 0); background-image: linear-gradient(
180deg,
#d9d9d9,
#d9d9d9 100%,
transparent 0
);
background-size: 100% 1px; background-size: 100% 1px;
padding: 0 10px; padding: 0 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -1705,7 +2048,7 @@ li { ...@@ -1705,7 +2048,7 @@ li {
max-width: 300px; max-width: 300px;
height: 41px; height: 41px;
} }
.ivu-select-single{ .ivu-select-single {
width: 100% !important; width: 100% !important;
max-width: 300px; max-width: 300px;
} }
...@@ -1713,7 +2056,8 @@ li { ...@@ -1713,7 +2056,8 @@ li {
height: 41px; height: 41px;
position: relative; position: relative;
} }
.ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value { .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
display: block; display: block;
height: 41px; height: 41px;
line-height: 41px; line-height: 41px;
...@@ -1730,11 +2074,11 @@ li { ...@@ -1730,11 +2074,11 @@ li {
padding: 10.5px 16px; padding: 10.5px 16px;
clear: both; clear: both;
color: #515a6e; color: #515a6e;
font-size: 14px!important; font-size: 14px !important;
white-space: nowrap; white-space: nowrap;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
transition: background .2s ease-in-out; transition: background 0.2s ease-in-out;
} }
} }
} }
......
src/components/MicroLecturePlay.vue
<template> <template>
<div id="mlplayBox"> <div id="mlplayBox">
<div class="starIcon" v-show="!isInit" @click="starPlay"> <div
class="starIcon"
v-show="!isInit"
@click="starPlay"
>
<div class="starTitle"> <div class="starTitle">
<i class="iconfont">&#xe653;</i> <i class="iconfont">&#xe653;</i>
<div class="loadingBox"> <div class="loadingBox">
<div class="loadingTrace" :style="{width: initPercent}"></div> <div
class="loadingTrace"
:style="{width: initPercent}"
></div>
</div> </div>
<h2>{{!!microLectureTitle?microLectureTitle:'暂未设置标题'}}</h2> <h2>{{!!microLectureTitle?microLectureTitle:'暂未设置标题'}}</h2>
<div>{{!!introduction?introduction:'暂未设置简介'}}</div> <div>{{!!introduction?introduction:'暂未设置简介'}}</div>
</div> </div>
</div> </div>
<div class="pageNum goback" @click="goback" v-show="initPercent === '100%' && !!browserVersion && (browserVersion.ios || browserVersion.android)"><i class="iconfont">&#xe651;</i></div> <div
class="pageNum goback"
@click="goback"
v-show="initPercent === '100%' && !!browserVersion && (browserVersion.ios || browserVersion.android)"
><i class="iconfont">&#xe651;</i></div>
<div class="pageNum">{{activeIndex + 1}} / {{pages.length}}</div> <div class="pageNum">{{activeIndex + 1}} / {{pages.length}}</div>
<div class="playControl" @click="toggle"> <div
class="playControl"
@click="toggle"
>
<progress-circle <progress-circle
:completed-steps="pc_options.completedSteps" :completed-steps="pc_options.completedSteps"
:total-steps="pc_options.totalSteps" :total-steps="pc_options.totalSteps"
...@@ -25,13 +39,26 @@ ...@@ -25,13 +39,26 @@
:animation-duration="pc_options.animationDuration" :animation-duration="pc_options.animationDuration"
:key="activeIndex" :key="activeIndex"
></progress-circle> ></progress-circle>
<i class="iconfont" v-show="microIsplaying">&#xe67d;</i> <i
<i class="iconfont" v-show="!microIsplaying">&#xe653;</i> class="iconfont"
v-show="microIsplaying"
>&#xe67d;</i>
<i
class="iconfont"
v-show="!microIsplaying"
>&#xe653;</i>
</div> </div>
<!-- 因为app调入来时已经有了一个加入自学，这里就不设置了 --> <!-- 因为app调入来时已经有了一个加入自学，这里就不设置了 -->
<!-- <div class="addStudy" @click="appFavorite" v-if="browserVersion.mobile" v-show="isParticipate === false || isParticipate === 'false'"><i class="iconfont">&#xe654;&nbsp;加入自学</i></div> --> <!-- <div class="addStudy" @click="appFavorite" v-if="browserVersion.mobile" v-show="isParticipate === false || isParticipate === 'false'"><i class="iconfont">&#xe654;&nbsp;加入自学</i></div> -->
<div class="reveal" ref="reveal" :style="revealBoxStyle"> <div
<div class="slides" ref="slides"> class="reveal"
ref="reveal"
:style="revealBoxStyle"
>
<div
class="slides"
ref="slides"
>
<section <section
v-for="(item, index) in pages" v-for="(item, index) in pages"
:key="index" :key="index"
...@@ -44,7 +71,10 @@ ...@@ -44,7 +71,10 @@
</section> </section>
</div> </div>
</div> </div>
<audio v-show="false" ref="audio"></audio> <audio
v-show="false"
ref="audio"
></audio>
</div> </div>
</template> </template>
...@@ -69,7 +99,7 @@ export default { ...@@ -69,7 +99,7 @@ export default {
data () { data () {
return { return {
pages: [], pages: [],
baseSourceUrl: 'https://res.qida.com/', baseSourceUrl: 'https://course.qida.com.cn',
revealBoxStyle: { revealBoxStyle: {
width: 0, width: 0,
height: 0, height: 0,
...@@ -473,14 +503,16 @@ export default { ...@@ -473,14 +503,16 @@ export default {
return params return params
}, },
appFinish () { appFinish () {
const params = new URLSearchParams() // const params = new URLSearchParams()
params.set('crsId', this.crsId) const params = this.setBaseParams()
params.set('crsSource', this.crsSource) // params.set('crsId', this.crsId)
// params.set('crsSource', this.crsSource)
params.set('sessionTime', this.sessiontTime / 10) params.set('sessionTime', this.sessiontTime / 10)
params.set('lessonMode', this.lessonMode) // params.set('lessonMode', this.lessonMode)
params.set('chapterId', this.itemId) params.set('chapterId', this.itemId)
params.set('lessonLocation', this.activeIndex + 1) params.set('lessonLocation', this.activeIndex + 1)
params.set('attempId', this.attempId) // params.set('attempId', this.attempId)
// params.set('taskId', this.taskId)
const percent = parseInt((this.activeIndex + 1) / this.pages.length * 100) const percent = parseInt((this.activeIndex + 1) / this.pages.length * 100)
params.set('lessonProgress', percent) params.set('lessonProgress', percent)
const status = this.activeIndex + 1 >= this.pages.length ? 'completed' : 'incomplete' const status = this.activeIndex + 1 >= this.pages.length ? 'completed' : 'incomplete'
...@@ -493,6 +525,7 @@ export default { ...@@ -493,6 +525,7 @@ export default {
const params = new URLSearchParams() const params = new URLSearchParams()
params.append('id', this.crsId) params.append('id', this.crsId)
params.append('originType', this.crsSource) params.append('originType', this.crsSource)
params.append('taskId', this.taskId)
this.compatibleApi(params, 'courseDetail', 'pub').then((res) => { this.compatibleApi(params, 'courseDetail', 'pub').then((res) => {
// console.log(res) // console.log(res)
const isParticipate = res.data.values.isParticipate const isParticipate = res.data.values.isParticipate
...@@ -651,7 +684,7 @@ export default { ...@@ -651,7 +684,7 @@ export default {
}) })
}, },
getPages (coursewareDir, microId) { getPages (coursewareDir, microId) {
const url = 'https://qida-videos.oss-cn-shenzhen.aliyuncs.com/' + coursewareDir + '/content.json' const url = 'https://qida-course.obs.cn-south-1.myhuaweicloud.com/' + coursewareDir + '/content.json'
this.microId = microId this.microId = microId
axios({ axios({
url: url, url: url,
...@@ -813,7 +846,7 @@ export default { ...@@ -813,7 +846,7 @@ export default {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0; bottom: 0;
color: #FFF; color: #fff;
background-color: #59b8fb; background-color: #59b8fb;
line-height: 1; line-height: 1;
font-size: 1.07692308em; font-size: 1.07692308em;
...@@ -854,7 +887,7 @@ export default { ...@@ -854,7 +887,7 @@ export default {
transform: translateZ(0); transform: translateZ(0);
text-align: center; text-align: center;
line-height: 35px; line-height: 35px;
font-size: .16rem; font-size: 0.16rem;
color: rgb(251 251 251 / 60%); color: rgb(251 251 251 / 60%);
border: 1px solid rgb(251 251 251 / 0.6); border: 1px solid rgb(251 251 251 / 0.6);
} }
...@@ -866,7 +899,7 @@ export default { ...@@ -866,7 +899,7 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
background-color: rgba(0,0,0,.2); background-color: rgba(0, 0, 0, 0.2);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
section { section {
...@@ -898,16 +931,18 @@ export default { ...@@ -898,16 +931,18 @@ export default {
// transform-style: flat; // transform-style: flat;
// transition: transform-origin .8s cubic-bezier(.26,.86,.44,.985),transform .8s cubic-bezier(.26,.86,.44,.985),visibility .8s cubic-bezier(.26,.86,.44,.985),opacity .8s cubic-bezier(.26,.86,.44,.985); // transition: transform-origin .8s cubic-bezier(.26,.86,.44,.985),transform .8s cubic-bezier(.26,.86,.44,.985),visibility .8s cubic-bezier(.26,.86,.44,.985),opacity .8s cubic-bezier(.26,.86,.44,.985);
// } // }
.reveal .slides>section[data-transition=convex].past, .reveal .slides>section[data-transition~=convex-out].past, .reveal.convex .slides>section:not([data-transition]).past { .reveal .slides > section[data-transition='convex'].past,
transform: translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0); .reveal .slides > section[data-transition~='convex-out'].past,
.reveal.convex .slides > section:not([data-transition]).past {
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
} }
.reveal p { .reveal p {
margin: 0; margin: 0;
line-height: 1.3; line-height: 1.3;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
font-size: .12rem; font-size: 0.12rem;
padding: 0.06rem .06rem; padding: 0.06rem 0.06rem;
width: 100%; width: 100%;
background: rgb(0 0 0 / 0.6); background: rgb(0 0 0 / 0.6);
box-sizing: border-box; box-sizing: border-box;
...@@ -961,7 +996,7 @@ export default { ...@@ -961,7 +996,7 @@ export default {
} }
h2 { h2 {
font-size: 0.16rem; font-size: 0.16rem;
margin: 20px 0 15px 0 margin: 20px 0 15px 0;
} }
div { div {
font-size: 0.12rem; font-size: 0.12rem;
...@@ -970,5 +1005,4 @@ export default { ...@@ -970,5 +1005,4 @@ export default {
} }
} }
} }
</style> </style>
vue.config.js
/*
* @Author: xiaowf
* @Date: 2020-09-09 09:04:50
* @LastEditors: xiaowf
* @LastEditTime: 2020-12-22 14:24:29
* @Description: descript the file
*/
module.exports = { module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
assetsDir: 'static', assetsDir: 'static',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment