|
|
@@ -21,71 +21,58 @@
|
|
|
<div ref="localPlayerContainer" class="w-1/4 h-1/4 bg-5 absolute top-0 left-0"></div>
|
|
|
<div class="full-screen" @click="toggleFullscreen"></div>
|
|
|
<div class="leave-rtc" @click="leaveRtc">退出</div>
|
|
|
-<!-- <div class="w-full h-36px absolute bottom-0 left-0 flex justify-end items-center text-xl text-white bg-black px-4 opacity-10 hover:opacity-60">-->
|
|
|
-<!-- <div class="w-140px flex items-center mr-4">-->
|
|
|
-<!-- <i-clarity:volume-up-solid />-->
|
|
|
-<!-- <el-slider v-model="volume" @change="handleChangeVolume" class="ml-2" />-->
|
|
|
-<!-- </div>-->
|
|
|
-
|
|
|
-<!-- <i-bx:fullscreen @click="toggleFullscreen" class="cursor-pointer" />-->
|
|
|
-<!-- </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <ul class="file-list">-->
|
|
|
- <!-- <li :class="default_res.ykz_id == default_res_id?'selected':''">-->
|
|
|
- <!-- <div class="file-choose">-->
|
|
|
- <!-- <div class="file-ico word"></div>-->
|
|
|
- <!-- </div>-->
|
|
|
-
|
|
|
- <!-- <div class="flex-1 w-250" @click="getFilePreview(default_res)">-->
|
|
|
- <!-- <h3 class="font-size-14 text-overflow">{{default_res.ykz_title}}</h3>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <button type="button" class="op-btn blue">替换</button>-->
|
|
|
- <!-- <input type="file" class="upload default" id="uploadDefault" accept=".doc,.docx" @change="uploadFile(1)" v-loading.fullscreen.lock="fullscreenLoading"/>-->
|
|
|
- <!-- <span class="arrow"></span>-->
|
|
|
- <!-- </li>-->
|
|
|
- <!-- <div class="mt30 text-center pr">-->
|
|
|
- <!-- <div class="d-in-block pr">-->
|
|
|
- <!-- <button type="button" class="op-btn green">-->
|
|
|
- <!-- <span class="d-in-block v-mid icon-add mr5"></span>-->
|
|
|
- <!-- <span class="d-in-block v-mid">上传附件</span>-->
|
|
|
- <!-- </button>-->
|
|
|
- <!-- <input type="file" class="upload" id="uploadFile" accept="image/*,.doc,.docx,.wps,.wpt,.xls,.xlsx,.csv,.ppt,.pptx,.pdf,.mp3,.mp4,.enbx" @change="uploadFile(2)" v-loading.fullscreen.lock="fullscreenLoading"/>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <button type="button" class="ml20 op-btn red" :disabled="chooseCheck.length == 0" @click="delResource">删除附件</button>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <li v-for="item in resource_list" :class="item.ykz_id == default_res_id?'selected':''">-->
|
|
|
- <!-- <div class="file-choose pr" :class="chooseCheck.includes(item.ykz_id)?'selected':''">-->
|
|
|
- <!-- <div class="file-ico ppt" v-if="item.ykz_ext == 'ppt' || item.ykz_ext == 'pptx'"></div>-->
|
|
|
- <!-- <div class="file-ico word" v-else-if="item.ykz_ext == 'doc' || item.ykz_ext == 'docx' || item.ykz_ext == 'wps' || item.ykz_ext == 'wpt'"></div>-->
|
|
|
- <!-- <div class="file-ico pdf" v-else-if="item.ykz_ext == 'pdf'"></div>-->
|
|
|
- <!-- <div class="file-ico excel" v-else-if="item.ykz_ext == 'xls' || item.ykz_ext == 'xlsx' || item.ykz_ext == 'csv'"></div>-->
|
|
|
- <!-- <div class="file-ico image" v-else-if="item.ykz_ext == 'jpg' || item.ykz_ext == 'jpeg' || item.ykz_ext == 'png' || item.ykz_ext == 'gif'"></div>-->
|
|
|
- <!-- <div class="file-ico video" v-else-if="item.ykz_ext == 'mp4'"></div>-->
|
|
|
- <!-- <div class="file-ico audio" v-else-if="item.ykz_ext == 'mp3'"></div>-->
|
|
|
- <!-- <div class="file-ico common" v-else></div>-->
|
|
|
- <!-- <p class="list-check hand">-->
|
|
|
- <!-- <input type="checkbox" :id="item.ykz_id" :value="item.ykz_id" name="lesson"-->
|
|
|
- <!-- class="choose-check" v-model="chooseCheck">-->
|
|
|
- <!-- <label :for="item.ykz_id"></label>-->
|
|
|
- <!-- </p>-->
|
|
|
- <!-- </div>-->
|
|
|
-
|
|
|
- <!-- <div class="flex-1 w-250 pl10" @click="getFilePreview(item)">-->
|
|
|
- <!-- <h3 class="font-size-14 text-overflow">{{item.ykz_title}}</h3>-->
|
|
|
- <!-- <div class="mt5 clearfix">-->
|
|
|
- <!-- <h3 class="fl font-size-12 lh24">{{item.create_dateline}}</h3>-->
|
|
|
- <!-- <h3 class="fl ml10 shot-img small"><img-->
|
|
|
- <!-- :src="item.ykz_avatar" alt=""></h3>-->
|
|
|
- <!-- <h4 class="fl ml5 font-size-12 lh24 text-overflow mw130">{{item.ykz_realname}}</h4>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <button type="button" class="cover-btn" @click="updateCover(item)" v-loading.fullscreen.lock="fullscreenLoading">封面</button>-->
|
|
|
- <!-- <span class="arrow"></span>-->
|
|
|
- <!-- </li>-->
|
|
|
- <!-- </ul>-->
|
|
|
+ <ul class="file-list">
|
|
|
+ <li v-for="(item,index) in resource_list" :class="index == 0?'selected':''">
|
|
|
+ <div class="file-choose pr" :class="chooseCheck.includes(item.ykz_id)?'selected':''">
|
|
|
+ <div class="file-ico ppt" v-if="item.ykz_ext == 'ppt' || item.ykz_ext == 'pptx'"></div>
|
|
|
+ <div class="file-ico word"
|
|
|
+ v-else-if="item.ykz_ext == 'doc' || item.ykz_ext == 'docx' || item.ykz_ext == 'wps' || item.ykz_ext == 'wpt'"></div>
|
|
|
+ <div class="file-ico pdf" v-else-if="item.ykz_ext == 'pdf'"></div>
|
|
|
+ <div class="file-ico excel"
|
|
|
+ v-else-if="item.ykz_ext == 'xls' || item.ykz_ext == 'xlsx' || item.ykz_ext == 'csv'"></div>
|
|
|
+ <div class="file-ico image"
|
|
|
+ v-else-if="item.ykz_ext == 'jpg' || item.ykz_ext == 'jpeg' || item.ykz_ext == 'png' || item.ykz_ext == 'gif'"></div>
|
|
|
+ <div class="file-ico video" v-else-if="item.ykz_ext == 'mp4'"></div>
|
|
|
+ <div class="file-ico audio" v-else-if="item.ykz_ext == 'mp3'"></div>
|
|
|
+ <div class="file-ico common" v-else></div>
|
|
|
+ <p class="list-check hand">
|
|
|
+ <input type="checkbox" :id="item.ykz_id" :value="item.ykz_id" name="lesson"
|
|
|
+ class="choose-check" v-model="chooseCheck">
|
|
|
+ <label :for="item.ykz_id"></label>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 w-250 pl10" @click="">
|
|
|
+ <h3 class="font-size-14 text-overflow">{{ item.ykz_title }}</h3>
|
|
|
+ <div class="mt5 clearfix">
|
|
|
+ <h3 class="fl font-size-12 lh24">{{ item.create_dateline }}</h3>
|
|
|
+ <h3 class="fl ml10 shot-img small"><img
|
|
|
+ :src="item.ykz_avatar" alt=""></h3>
|
|
|
+ <h4 class="fl ml5 font-size-12 lh24 text-overflow mw130">{{ item.ykz_realname }}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span class="arrow"></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="mt30 text-center pr">
|
|
|
+ <div class="d-in-block pr">
|
|
|
+ <button type="button" class="op-btn green">
|
|
|
+ <span class="d-in-block v-mid icon-add mr5"></span>
|
|
|
+ <span class="d-in-block v-mid">上传附件</span>
|
|
|
+ </button>
|
|
|
+ <input type="file" class="upload" id="uploadFile"
|
|
|
+ accept="image/*,.doc,.docx,.wps,.wpt,.xls,.xlsx,.csv,.ppt,.pptx,.pdf,.mp3,.mp4,.enbx"
|
|
|
+ @change="uploadFile(2)"
|
|
|
+ v-loading.fullscreen.lock="fullscreenLoading"/>
|
|
|
+ </div>
|
|
|
+ <button type="button" class="ml20 op-btn red" :disabled="chooseCheck.length == 0" @click="delFile">
|
|
|
+ 删除附件
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
|
|
|
@@ -144,15 +131,10 @@
|
|
|
import commonHeader from "@/components/header/index.vue";
|
|
|
import {useRoute} from "vue-router";
|
|
|
import AgoraRTC from "agora-rtc-sdk-ng";
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
-import {rate_list, rate_add,course_detail} from "@/pages/zhjy/zhjyxtbk/nrxq/api.js";
|
|
|
+import {ElMessage} from 'element-plus';
|
|
|
+import {rate_list, rate_add, course_detail, file_list} from "@/pages/zhjy/zhjyxtbk/nrxq/api.js";
|
|
|
+
|
|
|
const route = useRoute()
|
|
|
-let resource_list = $ref([]);
|
|
|
-let default_res = $ref({});
|
|
|
-let default_res_id = $ref('');
|
|
|
-let fullscreenLoading = $ref(false);
|
|
|
-let preview_type = $ref('');
|
|
|
-let preview_link = $ref('');
|
|
|
let rateValue = $ref('');
|
|
|
let zx_id = route.params.id;
|
|
|
let r_page = $ref(1);
|
|
|
@@ -169,16 +151,18 @@ let rtc = {
|
|
|
client: null,
|
|
|
};
|
|
|
let showBoard = $ref(false);
|
|
|
+
|
|
|
function getCourseDetail() {
|
|
|
let data = {
|
|
|
- zx_id:zx_id
|
|
|
+ zx_id: zx_id
|
|
|
}
|
|
|
- course_detail(data).then(res=>{
|
|
|
- if(res.code == 1) {
|
|
|
+ course_detail(data).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
courseDetail = res.data.one_info;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
function getRateList() {
|
|
|
let data = {
|
|
|
page: r_page,
|
|
|
@@ -193,10 +177,11 @@ function getRateList() {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
function rateSubmit() {
|
|
|
let data = {
|
|
|
zxke_user_realname: userInfo.user_realname,
|
|
|
- zxke_star: Number(rateValue),
|
|
|
+ zxke_star: rateValue,
|
|
|
zx_id: zx_id
|
|
|
}
|
|
|
rate_add(data).then(res => {
|
|
|
@@ -214,19 +199,21 @@ function rateSubmit() {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
function handleCurrentChange(val) {
|
|
|
r_page = val;
|
|
|
getRateList();
|
|
|
}
|
|
|
+
|
|
|
async function launchRtc() {
|
|
|
showBoard = true;
|
|
|
const options = {
|
|
|
appId: courseDetail.rtc_appid,
|
|
|
- channel: 'zhjyxbkc'+ courseDetail.zx_id ,
|
|
|
+ channel: 'zhjyxbkc' + courseDetail.zx_id,
|
|
|
token: courseDetail.rtc_token,
|
|
|
uid: userInfo.user_id
|
|
|
}
|
|
|
- let client = rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
|
|
|
+ let client = rtc.client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
|
|
|
clientRemoteUsers = rtc.client.remoteUsers
|
|
|
rtc.client.remoteUsers.forEach(async user => {
|
|
|
await client.subscribe(user, 'video');
|
|
|
@@ -241,6 +228,7 @@ async function launchRtc() {
|
|
|
});
|
|
|
|
|
|
client.on("user-published", async (user, mediaType) => {
|
|
|
+ // console.log('published')
|
|
|
clientRemoteUsers = rtc.client.remoteUsers
|
|
|
// 发起订阅
|
|
|
await client.subscribe(user, mediaType);
|
|
|
@@ -268,6 +256,7 @@ async function launchRtc() {
|
|
|
|
|
|
rtc.localVideoTrack.play(localPlayerContainer.value);
|
|
|
}
|
|
|
+
|
|
|
const localPlayerContainer = ref()
|
|
|
const remotePlayerContainer = ref()
|
|
|
|
|
|
@@ -290,6 +279,7 @@ const wrapperContainer = $ref()
|
|
|
function requestFullscreen() {
|
|
|
wrapperContainer.requestFullscreen()
|
|
|
}
|
|
|
+
|
|
|
function exitFullscreen() {
|
|
|
document.exitFullscreen()
|
|
|
}
|
|
|
@@ -301,6 +291,7 @@ function toggleFullscreen() {
|
|
|
exitFullscreen()
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
async function leaveRtc() {
|
|
|
rtc.localAudioTrack.close();
|
|
|
rtc.localVideoTrack.close();
|
|
|
@@ -309,7 +300,9 @@ async function leaveRtc() {
|
|
|
rtc.client.leave();
|
|
|
showBoard = false;
|
|
|
}
|
|
|
+
|
|
|
const volume = $ref(50)
|
|
|
+
|
|
|
function handleChangeVolume(val) {
|
|
|
clientRemoteUsers.forEach(remoteUser => {
|
|
|
remoteUser.audioTrack.setVolume(val * 2);
|
|
|
@@ -318,79 +311,131 @@ function handleChangeVolume(val) {
|
|
|
|
|
|
getRateList();
|
|
|
getCourseDetail();
|
|
|
-// export default {
|
|
|
-// name: "index",
|
|
|
-// components: {
|
|
|
-// commonHeader,
|
|
|
-// AgoraRTC,
|
|
|
-// WebOfficeSdkEs,
|
|
|
-// // websocket
|
|
|
-// },
|
|
|
-// data() {
|
|
|
-// return {
|
|
|
-// userInfo: user,
|
|
|
-// resource_list: [],
|
|
|
-// default_res: {},
|
|
|
-// default_res_id: '',
|
|
|
-// fullscreenLoading: false,
|
|
|
-// preview_type: '',
|
|
|
-// preview_link: '',
|
|
|
-// rateValue: '',
|
|
|
-// zx_id: '',
|
|
|
-// r_page: '1',
|
|
|
-// limit: '10',
|
|
|
-// r_total: 0,
|
|
|
-// rateList: []
|
|
|
-// }
|
|
|
-// },
|
|
|
-// methods: {
|
|
|
-// getRateList() {
|
|
|
-// let data = {
|
|
|
-// page: this.r_page,
|
|
|
-// limit: '2',
|
|
|
-// zx_id: this.zx_id
|
|
|
-// }
|
|
|
-// rate_list(data).then(res => {
|
|
|
-// if (res.code == 1) {
|
|
|
-// this.rateList = res.data.page_data;
|
|
|
-// this.r_page = res.data.page_now;
|
|
|
-// this.r_total = Number(res.data.total_rows);
|
|
|
-// }
|
|
|
-// })
|
|
|
-// },
|
|
|
-// rateSubmit() {
|
|
|
-// let data = {
|
|
|
-// zxke_user_realname: this.userInfo.user_realname,
|
|
|
-// zxke_star: this.rateValue,
|
|
|
-// zx_id: this.zx_id
|
|
|
-// }
|
|
|
-// rate_add(data).then(res => {
|
|
|
-// if (res.code == 1) {
|
|
|
-// this.$message({
|
|
|
-// message: '评价成功！',
|
|
|
-// type: 'success',
|
|
|
-// showClose: true,
|
|
|
-// duration: '1000',
|
|
|
-// onClose: () => {
|
|
|
-// this.rateValue = '';
|
|
|
-// this.getRateList();
|
|
|
-// }
|
|
|
-// });
|
|
|
-// }
|
|
|
-// })
|
|
|
-// },
|
|
|
-// handleCurrentChange(val) {
|
|
|
-// this.r_page = val;
|
|
|
-// this.getRateList();
|
|
|
-// }
|
|
|
-// },
|
|
|
-// mounted() {
|
|
|
-// if (this.$route.params.id != "") {
|
|
|
-// this.zx_id = this.$route.params.id;
|
|
|
-// this.getRateList();
|
|
|
-// }
|
|
|
-// }
|
|
|
-// };
|
|
|
+</script>
|
|
|
+<script>
|
|
|
+import {file_list,file_add,file_del} from "@/pages/zhjy/zhjyxtbk/nrxq/api.js";
|
|
|
+import {REQUEST} from '~/utils/request';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userInfo: user,
|
|
|
+ resource_list: [],
|
|
|
+ fullscreenLoading: false,
|
|
|
+ preview_type: '',
|
|
|
+ preview_link: '',
|
|
|
+ zx_id: '',
|
|
|
+ chooseCheck: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getResourceList() {
|
|
|
+ let data = {
|
|
|
+ zx_id: this.zx_id
|
|
|
+ }
|
|
|
+ file_list(data).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.resource_list = res.data.page_data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadFile(type) {
|
|
|
+ let file = '';
|
|
|
+ if (type == '1') {
|
|
|
+ file = document.getElementById('uploadDefault').files[0];
|
|
|
+ } else {
|
|
|
+ file = document.getElementById('uploadFile').files[0];
|
|
|
+ }
|
|
|
+ this.fullscreenLoading = true;
|
|
|
+ if (file.size > 150 * 1024 * 1024) {
|
|
|
+ this.$message({
|
|
|
+ message: '文件大小不能超过150M!',
|
|
|
+ type: 'warning',
|
|
|
+ showClose: true,
|
|
|
+ duration: '1500',
|
|
|
+ });
|
|
|
+ file = '';
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ }
|
|
|
+ REQUEST['upload']({
|
|
|
+ url: 'upload/main/file',
|
|
|
+ data: {
|
|
|
+ filedata:file
|
|
|
+ },
|
|
|
+ timeout: 1000 * 180
|
|
|
+ }).then(({code, data}) => {
|
|
|
+ if (code == '1') {
|
|
|
+ document.getElementById('uploadFile').value = '';
|
|
|
+ const { url: url, file_name,ext } = data;
|
|
|
+ let v_data = {
|
|
|
+ issubmit: '1',
|
|
|
+ zx_id: this.zx_id,
|
|
|
+ ykz_ext: data.ext,
|
|
|
+ ykz_title: data.file_name,
|
|
|
+ yzk_bddz: data.url,
|
|
|
+ ykz_realname: this.userInfo.real_name
|
|
|
+ }
|
|
|
+ file_add(v_data).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ this.$message({
|
|
|
+ message: '附件添加成功！',
|
|
|
+ type: 'success',
|
|
|
+ showClose: true,
|
|
|
+ duration: '1000'
|
|
|
+ });
|
|
|
+ this.getResourceList();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return Promise.reject()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delFile() {
|
|
|
+ let data = {
|
|
|
+ ykz_id:this.chooseCheck
|
|
|
+ }
|
|
|
+ this.$confirm('确认要删除这些附件？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.fullscreenLoading = true;
|
|
|
+ file_del(data).then(res =>{
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ if(res.code === '1') {
|
|
|
+ this.$message({
|
|
|
+ message: '附件删除成功！',
|
|
|
+ type: 'success',
|
|
|
+ showClose: true,
|
|
|
+ duration: '1000'
|
|
|
+ });
|
|
|
+ this.chooseCheck = [];
|
|
|
+ this.getResourceList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'error',
|
|
|
+ showClose: true,
|
|
|
+ duration: '1000'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.$route.params.id != "") {
|
|
|
+ this.zx_id = this.$route.params.id;
|
|
|
+ this.getResourceList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import "@/styles/mixin.scss";
|
|
|
@@ -454,7 +499,8 @@ getCourseDetail();
|
|
|
height: 334px;
|
|
|
z-index: 100;
|
|
|
}
|
|
|
-.full-screen{
|
|
|
+
|
|
|
+.full-screen {
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
top: 10px;
|
|
|
@@ -465,7 +511,8 @@ getCourseDetail();
|
|
|
background-size: 30px 30px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.leave-rtc{
|
|
|
+
|
|
|
+.leave-rtc {
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
bottom: 10px;
|
|
|
@@ -480,6 +527,7 @@ getCourseDetail();
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.file-list {
|
|
|
width: 100%;
|
|
|
|
|
|
@@ -580,7 +628,7 @@ getCourseDetail();
|
|
|
|
|
|
.right {
|
|
|
flex: 1;
|
|
|
- margin-left: 20px;
|
|
|
+ margin-left: 30px;
|
|
|
min-height: 800px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -656,4 +704,63 @@ getCourseDetail();
|
|
|
border-bottom: 1px dashed rgba(110, 88, 197, .5);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.list-check {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 50;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ label {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 12px 0 0 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=checkbox] {
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ height: 100px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ & + label {
|
|
|
+ background: rgba(0, 0, 0, .25) url("images/live/icon-check.png") center no-repeat;
|
|
|
+ background-size: 32px 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:checked + label {
|
|
|
+ background: rgba(0, 0, 0, .25) url("/images/live/icon-checked.png") center no-repeat;
|
|
|
+ background-size: 32px 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.upload {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ margin-left: -100px;
|
|
|
+ width: 200px;
|
|
|
+ height: 32px;
|
|
|
+ z-index: 30;
|
|
|
+ opacity: 0;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.default {
|
|
|
+ width: 95px;
|
|
|
+ height: 40px;
|
|
|
+ left: auto;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: -20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
luohailiang
