mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 22:06:45 +08:00
952 lines
27 KiB
Vue
952 lines
27 KiB
Vue
<!-- 课件管理页面 -->
|
||
<template>
|
||
<!-- 预览弹窗 -->
|
||
<a-modal
|
||
:visible="visible"
|
||
title="查看"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle lookCourseModal"
|
||
width="80%"
|
||
@cancel="handleCancel"
|
||
@ok="handleCancel"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="@/assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">预览</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="handleCancel"
|
||
style="width: 22px; height: 22px"
|
||
src="@/assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="faceteach">
|
||
<div class="ft_main">
|
||
<div class="m_body">
|
||
<div class="mb_left">
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">课程名称：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
{{ filterTxt(detail.name) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items2">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">封面图：</span>
|
||
</div>
|
||
<img
|
||
:src="detail.picUrl"
|
||
alt="img"
|
||
style="width: 100px; height: 100px"
|
||
/>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
style="width: 10px; height: 10px"
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">目标人群：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
{{ filterTxt(detail.targetUser) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="detail.meaning" class="mbl_items2">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">课程价值：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
{{ filterTxt(detail.meaning) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">内容分类：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="select i6_input">
|
||
{{ categoryName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items" v-if="detail.sceneContent">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">场景：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="select i7_input">
|
||
{{ detail.sceneContent }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items" v-if="detail.tips">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">内容标签：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
{{ filterTxt(detail.tips) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb_right">
|
||
<!-- <div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="asterisk"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">授课教师：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
{{ filterTxt(detail.teacher) }}
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="mbl_items2" v-if="detail.intro">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="asterisk"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">课程简介：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i10_textarea">
|
||
{{ filterTxt(detail.intro) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items12">
|
||
<div
|
||
class="i12_box1"
|
||
style="position: relative"
|
||
v-for="(item, index) in detail.attach"
|
||
:key="index"
|
||
>
|
||
<div class="file_img">
|
||
<img
|
||
v-if="
|
||
item.indexOf('jpg') !== -1 ||
|
||
item.indexOf('jpeg') !== -1 ||
|
||
item.indexOf('png') !== -1
|
||
"
|
||
src="@/assets/images/coursewareManage/pngpic.png"
|
||
/>
|
||
<div v-else>
|
||
<img
|
||
v-if="item.indexOf('doc') !== -1"
|
||
src="@/assets/images/coursewareManage/docpic.png"
|
||
/>
|
||
<div v-else>
|
||
<img
|
||
v-if="item.indexOf('xls') !== -1"
|
||
src="@/assets/images/coursewareManage/xlspic.png"
|
||
/>
|
||
<div v-else>
|
||
<img
|
||
v-if="item.indexOf('ppt') !== -1"
|
||
src="@/assets/images/coursewareManage/pptpic.png"
|
||
/>
|
||
<div v-else>
|
||
<img
|
||
v-if="item.indexOf('pdf') !== -1"
|
||
src="@/assets/images/coursewareManage/pdfpic.png"
|
||
/>
|
||
<div v-else>
|
||
<img
|
||
v-if="item.indexOf('zip') !== -1"
|
||
src="@/assets/images/coursewareManage/zippic.png"
|
||
/>
|
||
<img
|
||
v-else
|
||
src="@/assets/images/coursewareManage/docpic.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="file_detail">
|
||
<div class="file_name">
|
||
<!-- http://43.143.139.204:12016/7.231.196.214:12016/7-1670486854017.jpg -->
|
||
<span
|
||
style="
|
||
color: #6f6f6f;
|
||
width: 200px;
|
||
display: block;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 72px;
|
||
"
|
||
>
|
||
{{
|
||
item.indexOf("-") !== -1
|
||
? item.slice(
|
||
item.lastIndexOf("/") + 1,
|
||
item.lastIndexOf("-")
|
||
) + item.slice(item.lastIndexOf("."))
|
||
: item
|
||
}}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="file_updata">
|
||
<div class="updatabox">
|
||
<div class="updatacolor"></div>
|
||
<div class="updataxq" style="right: -62px">
|
||
上传完成
|
||
</div>
|
||
</div>
|
||
<div class="upjd">
|
||
<span style="margin: auto 5px">100%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a
|
||
:href="
|
||
item.indexOf('http') !== -1 ? item : locationHref + item
|
||
"
|
||
style="margin-left: 5px"
|
||
>下载</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m_footer" v-if="detail.outline !== '<p><br></p>'">
|
||
<div class="fotnam">
|
||
<span>课程大纲</span>
|
||
</div>
|
||
<div class="fotarea">
|
||
<div style="border: 1px solid #ccc">
|
||
<div v-html="detail.outline" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m_btn">
|
||
<div class="btn btn6" @click="handleCancel">
|
||
<div class="btnText">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
<script>
|
||
import { reactive, toRefs, defineComponent, ref, watch, computed } from "vue";
|
||
import * as api1 from "../../../api/index1";
|
||
import { useStore } from "vuex";
|
||
|
||
export default defineComponent({
|
||
props: {
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
detail: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
},
|
||
setup(props, { emit }) {
|
||
console.log("props", props);
|
||
const store = useStore();
|
||
|
||
const state = reactive({
|
||
imgList: [],
|
||
options2222: [
|
||
{
|
||
title: "领导力",
|
||
value: "100",
|
||
children: [
|
||
{
|
||
title: "管理业务",
|
||
value: "1001",
|
||
},
|
||
{
|
||
title: "管理团队",
|
||
value: "1002",
|
||
},
|
||
{
|
||
title: "管理自我",
|
||
value: "1003",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "专业力",
|
||
value: "200",
|
||
children: [
|
||
{
|
||
title: "研发",
|
||
value: "2001",
|
||
},
|
||
{
|
||
title: "系统和解决方案",
|
||
value: "2002",
|
||
},
|
||
{
|
||
title: "生产技术与制造",
|
||
value: "2003",
|
||
},
|
||
{
|
||
title: "供应链",
|
||
value: "2004",
|
||
},
|
||
{
|
||
title: "营销",
|
||
value: "2005",
|
||
},
|
||
{
|
||
title: "品质",
|
||
value: "2006",
|
||
},
|
||
{
|
||
title: "专业职能",
|
||
value: "2007",
|
||
children: [
|
||
{
|
||
title: "战略与企划",
|
||
value: "200701",
|
||
},
|
||
{
|
||
title: "流程管理",
|
||
value: "200702",
|
||
},
|
||
{
|
||
title: "业绩管理",
|
||
value: "200703",
|
||
},
|
||
{
|
||
title: "项目管理",
|
||
value: "200704",
|
||
},
|
||
{
|
||
title: "信息技术",
|
||
value: "200705",
|
||
},
|
||
{
|
||
title: "环境与安全",
|
||
value: "200706",
|
||
},
|
||
{
|
||
title: "人力资源",
|
||
value: "200707",
|
||
},
|
||
{
|
||
title: "企业文化",
|
||
value: "200708",
|
||
},
|
||
{
|
||
title: "品牌",
|
||
value: "200709",
|
||
},
|
||
{
|
||
title: "财务",
|
||
value: "200710",
|
||
},
|
||
{
|
||
title: "法务",
|
||
value: "200711",
|
||
},
|
||
{
|
||
title: "风险控制",
|
||
value: "200712",
|
||
},
|
||
{
|
||
title: "行政",
|
||
value: "200713",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "医工",
|
||
value: "2008",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "通用力",
|
||
value: "300",
|
||
children: [
|
||
{
|
||
title: "职业操守与道德",
|
||
value: "3001",
|
||
},
|
||
{
|
||
title: "职业素养与技能",
|
||
value: "3002",
|
||
},
|
||
{
|
||
title: "规章制度",
|
||
value: "3003",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
categoryName: "",
|
||
ceshi: "https://u-pre.boe.com/upload/测试下载ppt2-1671002026755.pptx",
|
||
ceshi2: "http://43.143.139.204:12016/测试下载ppt3-1671001683026.pptx",
|
||
locationHref:
|
||
location.href.indexOf("http://") !== -1
|
||
? "http://43.143.139.204:12016/"
|
||
: location.href.slice(0, location.href.indexOf("/m")) + "/upload/",
|
||
});
|
||
|
||
const sysTypeOptions = computed(() => store.state.sysType);
|
||
|
||
watch(
|
||
() => props.detail.sysTypeId,
|
||
() => {
|
||
state.categoryName = findClassFullName(sysTypeOptions.value);
|
||
}
|
||
);
|
||
|
||
function findClassFullName(list, name = "") {
|
||
return (
|
||
(list &&
|
||
list.length &&
|
||
list
|
||
.map((e) =>
|
||
props.detail.sysTypeId == e.dictCode
|
||
? name
|
||
? name + "-" + e.dictName
|
||
: e.dictName
|
||
: findClassFullName(
|
||
e.children,
|
||
name ? name + "-" + e.dictName : e.dictName
|
||
)
|
||
)
|
||
.filter((name) => name)
|
||
.join("")) ||
|
||
""
|
||
);
|
||
}
|
||
|
||
const filterTxt = (txt) => {
|
||
if (txt) {
|
||
return txt;
|
||
} else {
|
||
return "-";
|
||
}
|
||
};
|
||
|
||
const filterSenceTxt = (txt) => {
|
||
let str = "-";
|
||
if (txt) {
|
||
options3.value.forEach((item) => {
|
||
if (item.value === String(txt)) {
|
||
str = item.label;
|
||
}
|
||
});
|
||
}
|
||
return str;
|
||
};
|
||
const handleCancel = () => {
|
||
emit("cancel");
|
||
};
|
||
|
||
//获取分类、场景-----------字典配置-------------------------------
|
||
const options2 = ref([]);
|
||
const options3 = ref([]);
|
||
const getDictList = (param) => {
|
||
let obj = {
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
setCode: param,
|
||
};
|
||
api1
|
||
.getDict(obj)
|
||
.then((res) => {
|
||
console.log("获取字典成功", res);
|
||
if (res.data.code === 200) {
|
||
if (param === "faceclassClass") {
|
||
let arr = res.data.data.rows;
|
||
let newArr = [];
|
||
arr.forEach((item) => {
|
||
newArr.push({
|
||
value: item.dictCode,
|
||
label: item.dictName,
|
||
});
|
||
});
|
||
options2.value = state.options2222;
|
||
}
|
||
if (param === "faceclassScene") {
|
||
let arr = res.data.data.rows;
|
||
let newArr = [];
|
||
arr.forEach((item) => {
|
||
newArr.push({
|
||
value: item.dictCode,
|
||
label: item.dictName,
|
||
});
|
||
});
|
||
options3.value = newArr;
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log("获取字典失败", err);
|
||
});
|
||
};
|
||
getDictList("faceclassClass");
|
||
getDictList("faceclassScene");
|
||
//获取分类、场景----------------字典配置---------------------------
|
||
|
||
return {
|
||
...toRefs(state),
|
||
filterTxt,
|
||
filterSenceTxt,
|
||
handleCancel,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.lookCourseModal {
|
||
.ant-modal {
|
||
.ant-modal-content {
|
||
// width:1358px !important;
|
||
.ant-modal-body {
|
||
.modalHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.headerLeft {
|
||
margin-left: 27px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.headerLeftText {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modalMain {
|
||
.m_title {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.m_body {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.mb_left {
|
||
width: 50%;
|
||
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.inp_num {
|
||
position: absolute;
|
||
left: 398px;
|
||
top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items2 {
|
||
display: flex;
|
||
align-items: start;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
|
||
.i_upload_img {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.i_upload {
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.addimg {
|
||
position: relative;
|
||
|
||
.heng {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 25px;
|
||
width: 50px;
|
||
border: 1px solid #4ea6ff;
|
||
}
|
||
|
||
.shu {
|
||
position: absolute;
|
||
top: 25px;
|
||
left: 50px;
|
||
height: 50px;
|
||
border: 1px solid #4ea6ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.i2_cz {
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
|
||
.i2_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.i8_bottom {
|
||
display: flex;
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
}
|
||
}
|
||
|
||
.mb_right {
|
||
width: 50%;
|
||
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: -15px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
}
|
||
|
||
.accessory {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.accessory_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-top: -8px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items2 {
|
||
display: flex;
|
||
align-items: start;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.inp_num {
|
||
position: absolute;
|
||
left: 395px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items12 {
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
|
||
.i12_box1 {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 17px 0px 17px 21px;
|
||
border: 1px solid #eff4fc;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
|
||
.file_img {
|
||
width: 27px;
|
||
height: 32px;
|
||
// background-image: url(@/assets/images/coursewareManage/imgs.png);
|
||
margin-right: 22px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.file_detail {
|
||
width: 250px;
|
||
margin-right: 21px;
|
||
|
||
.file_updata {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.updatabox {
|
||
position: relative;
|
||
width: 230px;
|
||
height: 5px;
|
||
background-color: rgba(192, 192, 192, 0.25);
|
||
border-radius: 3px;
|
||
|
||
.updatacolor {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 5px;
|
||
background-color: #57c887;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updatacolor2 {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 80%;
|
||
height: 5px;
|
||
background-color: #ff7474;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updatacolor3 {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 60%;
|
||
height: 5px;
|
||
background-color: #4ea6ff;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updataxq {
|
||
position: absolute;
|
||
right: -62px;
|
||
top: -30px;
|
||
color: #57c887;
|
||
}
|
||
|
||
.updataxq2 {
|
||
position: absolute;
|
||
right: -62px;
|
||
top: -30px;
|
||
color: #ff7474;
|
||
}
|
||
|
||
.updataxq3 {
|
||
position: absolute;
|
||
right: -62px;
|
||
top: -30px;
|
||
color: #4ea6ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.file_operation {
|
||
display: flex;
|
||
|
||
.fobox {
|
||
margin-right: 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.m_footer {
|
||
display: flex;
|
||
margin: 20px 0;
|
||
|
||
.fotnam {
|
||
width: 100px;
|
||
display: flex;
|
||
justify-content: end;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.fotarea {
|
||
width: calc(100% - 150px);
|
||
position: relative;
|
||
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.fuwenben {
|
||
width: 90%;
|
||
height: 20px;
|
||
background-color: rgb(95, 95, 95);
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
top: 3px;
|
||
z-index: 9999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.m_btn {
|
||
width: 100%;
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
|
||
.btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: rgba(64, 158, 255, 0);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
.btn5 {
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
color: #4ea6ff;
|
||
}
|
||
|
||
.btn6 {
|
||
background-color: #4ea6ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|