mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 20:06:44 +08:00
948 lines
27 KiB
Vue
948 lines
27 KiB
Vue
<template>
|
||
<div class="growth">
|
||
<div style="background-color: #0078fc;">
|
||
<portalHeader textColor="#fff" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portalHeader>
|
||
</div>
|
||
<div class="growth-content">
|
||
<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
|
||
<div class="pathdetails">
|
||
<div class="pdname">
|
||
销售岗Band6路径图
|
||
</div>
|
||
<div class="detailinfo">
|
||
<div class="select">
|
||
<div class="select-radio" style="margin-left: 0;"><span style="background: #34CA2B;"></span> 必修</div>
|
||
<div class="select-radio"><span style="background: #FE9C4A;"></span>选修</div>
|
||
<div class="select-radio"><span style="background: #F2675D;"></span>已完成</div>
|
||
</div>
|
||
<div class="btn">
|
||
<el-button type="primary" @click="dialogTableVisible = true">全岗位路径图</el-button>
|
||
<el-button type="primary" @click="drawer = true" style="margin-left: 0;margin-top: 30px;">信息概览</el-button>
|
||
</div>
|
||
<div class="detailContent">
|
||
<div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
|
||
<div v-for="item, index in dataList" :key="index">
|
||
<el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="hover"
|
||
:visible-arrow="false">
|
||
<div style="font-size: 14px;padding: 20px 20px 10px; ">
|
||
<div style="font-size: 16px;font-weight: 600">{{ item.title }}</div>
|
||
<div style="margin: 20px 0;">
|
||
<el-tag>必修</el-tag>
|
||
<el-tag type="success">在线</el-tag>
|
||
</div>
|
||
<div>
|
||
<span style="color: #387DF7;">学习进度</span>
|
||
<el-progress :percentage="50"></el-progress>
|
||
</div>
|
||
<div style="margin: 20px 0;">课程讲师：启用家</div>
|
||
<div>课程简介：无</div>
|
||
<el-button style="width: 100%;margin-top: 20px;" type="primary">
|
||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||
<div></div>
|
||
<span>去学习</span>
|
||
<svg t="1706166377362" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="10521" width="24"
|
||
height="24">
|
||
<path
|
||
d="M512 102.4a422.912 422.912 0 1 0 422.570667 423.936A422.570667 422.570667 0 0 0 512 102.4z m117.418667 446.805333L462.506667 716.8a34.133333 34.133333 0 0 1-48.469334-48.128l143.018667-143.018667-143.018667-143.018666a34.133333 34.133333 0 0 1 0-48.128 34.133333 34.133333 0 0 1 48.469334 0l166.912 166.912a34.133333 34.133333 0 0 1 0 49.152z"
|
||
fill="#b4caf7" p-id="10522"></path>
|
||
</svg>
|
||
</div>
|
||
</el-button>
|
||
</div>
|
||
<div slot="reference" class="address" :style="{
|
||
backgroundColor: getColor(item.status, 0),
|
||
left: getPosition(item.name, index).left + 'px',
|
||
top: getPosition(item.name, index).top + 'px'
|
||
}">
|
||
<div class="icon">
|
||
<div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
|
||
{{ item.progress }}%
|
||
</div>
|
||
<div v-else class="icon-content" style="background-color: #fff;">
|
||
<svg style="width: 36px;height: 36px;" t="1706149497692" class="icon" viewBox="0 0 1024 1024"
|
||
version="1.1" p-id="4648">
|
||
<path
|
||
d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
|
||
fill="#F2675D" p-id="4649"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
<div :style="{
|
||
left: (getPosition(item.name, index).left + 55) + 'px',
|
||
top: getPosition(item.name, index).top + 'px'
|
||
}" class="iconTitle">{{ item.title }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footerBtn">
|
||
<el-button type="primary">1-7课</el-button>
|
||
<el-button>8-14课程</el-button>
|
||
<el-button type="primary" @click="switchInfo(5)">5</el-button>
|
||
<el-button type="primary" @click="switchInfo(7)">7</el-button>
|
||
<el-button type="primary" @click="switchInfo(14)">14</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="u-class">
|
||
<el-dialog :visible.sync="showUClass" width="833px">
|
||
<div class="ClassBoxContent">
|
||
<img src="@/assets/images/u_class.png" alt="" class="img" />
|
||
<div class="ContentBox">
|
||
<div class="left">
|
||
<div class="title">U选小课堂</div>
|
||
<div class="jy">项目简介</div>
|
||
<div class="msg">
|
||
于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
|
||
</div>
|
||
<div class="bottom"></div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="tyl" @click="tylClick">
|
||
<div class="tyl_title">
|
||
<img src="@/assets/images/dc.png" alt="" class="tyl_title_img" />
|
||
<span class="tyl_title_msg">通用力专区</span>
|
||
</div>
|
||
<div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
|
||
<div class="tyl_msg">
|
||
内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
|
||
</div>
|
||
</div>
|
||
<div class="cyl" @click="cylClick">
|
||
<div class="tyl_title">
|
||
<img src="@/assets/images/cyl.png" alt="" class="tyl_title_img" />
|
||
<span class="tyl_title_msg">创新力专区</span>
|
||
</div>
|
||
<div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
|
||
<div class="tyl_msg">
|
||
内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<el-dialog width="60%" :visible.sync="dialogTableVisible">
|
||
<span slot="title" class="dialog-header">
|
||
<div style="margin-right: 10px;">全岗位路径</div>
|
||
<div class="otherImg">
|
||
<img src="../../assets/images/growth/CurrentPath.png" alt="">
|
||
<span>当前路径</span>
|
||
</div>
|
||
<div class="otherImg">
|
||
<img src="../../assets/images/growth/OtherPath.png" alt="">
|
||
<span>其他路径</span>
|
||
</div>
|
||
<div class="otherImg">
|
||
<img src="../../assets/images/growth/NoPermissionPath.png" alt="">
|
||
<span>其他路径（无权限）</span>
|
||
</div>
|
||
</span>
|
||
<el-table :data="gridData" border :span-method="objectSpanMethod">
|
||
<el-table-column align="center" property="name" label=""></el-table-column>
|
||
<el-table-column align="center" label="市场企划岗">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.marketStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
|
||
<span v-else-if="scope.row.marketStatus === 1">
|
||
<img src="../../assets/images/growth/OtherPath.png" alt="">
|
||
</span>
|
||
<span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="销售岗">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.saleStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
|
||
<span v-else-if="scope.row.saleStatus === 1">
|
||
<img src="../../assets/images/growth/OtherPath.png" alt="">
|
||
</span>
|
||
<span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="产品企划岗">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.productStatus === 0"><img src="../../assets/images/growth/CurrentPath.png"
|
||
alt=""></span>
|
||
<span v-else-if="scope.row.productStatus === 1">
|
||
<img src="../../assets/images/growth/OtherPath.png" alt="">
|
||
</span>
|
||
<span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="FAE岗">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.FAEStatusL === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
|
||
<span v-else-if="scope.row.FAEStatusL === 1">
|
||
<img src="../../assets/images/growth/OtherPath.png" alt="">
|
||
</span>
|
||
<span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="销售管理岗位">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.salesManagement === 0"><img src="../../assets/images/growth/CurrentPath.png"
|
||
alt=""></span>
|
||
<span v-else-if="scope.row.salesManagement === 1">
|
||
<img src="../../assets/images/growth/OtherPath.png" alt="">
|
||
</span>
|
||
<span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
</el-dialog>
|
||
<el-drawer title="信息概况" :visible.sync="drawer" size="40%">
|
||
<div style="padding:0 40px;">
|
||
<el-card class="box-card">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="公告" name="first">用户管理</el-tab-pane>
|
||
<el-tab-pane label="共享文档" name="second">配置管理</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import portalHeader from '@/components/PortalHeader.vue';
|
||
export default {
|
||
name: 'Growth',
|
||
components: { portalHeader },
|
||
data() {
|
||
return {
|
||
showUClass: false,
|
||
colorAttrValue: {
|
||
0: ['#f1c9c3', "#e27166"],
|
||
1: ["#b8e3b8", "#8ac84a"],
|
||
2: ['#FFD04B', '#FBA944']
|
||
},
|
||
iconAttrs: {
|
||
'路径图背景': {
|
||
positions: [
|
||
{ left: 656, top: 594 },
|
||
{ left: 3, top: 530 },
|
||
{ left: 436, top: 360 },
|
||
{ left: 904, top: 334 },
|
||
{ left: 990, top: 56 },
|
||
]
|
||
},
|
||
'路径图背景7': {
|
||
positions: [
|
||
{ left: 656, top: 594 },
|
||
{ left: 323, top: 560 },
|
||
{ left: 118, top: 426 },
|
||
{ left: 504, top: 360 },
|
||
{ left: 904, top: 336 },
|
||
{ left: 1200, top: 190 },
|
||
{ left: 988, top: 56 },
|
||
]
|
||
},
|
||
'路径图背景全': {
|
||
positions: [
|
||
{ left: 500, top: 1440 },
|
||
{ left: 270, top: 1380 },
|
||
{ left: 0, top: 1225 },
|
||
{ left: 215, top: 1088 },
|
||
{ left: 606, top: 1000 },
|
||
{ left: 920, top: 936 },
|
||
{ left: 1106, top: 658 },
|
||
{ left: 880, top: 580 },
|
||
{ left: 520, top: 528 },
|
||
{ left: 168, top: 476 },
|
||
{ left: 140, top: 286 },
|
||
{ left: 334, top: 140 },
|
||
{ left: 592, top: 38 },
|
||
{ left: 970, top: -30 },
|
||
]
|
||
}
|
||
},
|
||
dataList: [{
|
||
name: '路径图背景',
|
||
progress: '99',
|
||
title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导',
|
||
status: 0
|
||
}, {
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗前培JT辅导OJT辅导',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗前',
|
||
status: 2
|
||
},
|
||
{
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗位',
|
||
status: 0
|
||
},
|
||
{
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗前岗前',
|
||
status: 1
|
||
}],
|
||
dialogTableVisible: false,
|
||
gridData: [{
|
||
name: 'Band10+',
|
||
marketStatus: 0,
|
||
saleStatus: 1,
|
||
productStatus: 2,
|
||
FAEStatusL: 0,
|
||
salesManagement: 1
|
||
}, {
|
||
name: 'Band10',
|
||
marketStatus: 1,
|
||
saleStatus: 2,
|
||
productStatus: 1,
|
||
FAEStatusL: 0,
|
||
salesManagement: 1
|
||
}, {
|
||
name: 'Band9',
|
||
marketStatus: 2,
|
||
saleStatus: 0,
|
||
productStatus: 0,
|
||
FAEStatusL: 0,
|
||
salesManagement: 1
|
||
}, {
|
||
name: 'Band8',
|
||
marketStatus: 0,
|
||
saleStatus: 1,
|
||
productStatus: 2,
|
||
FAEStatusL: 0,
|
||
salesManagement: 1
|
||
}, {
|
||
name: 'Band7',
|
||
marketStatus: 1,
|
||
saleStatus: 2,
|
||
productStatus: 0,
|
||
FAEStatusL: 0,
|
||
salesManagement: 1
|
||
}, {
|
||
name: 'Band6',
|
||
marketStatus: 2,
|
||
saleStatus: 0,
|
||
productStatus: 1,
|
||
FAEStatusL: 0,
|
||
salesManagement: 1
|
||
}],
|
||
drawer: false,
|
||
activeName: 'first'
|
||
|
||
};
|
||
},
|
||
mounted() {
|
||
},
|
||
methods: {
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
},
|
||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
if (columnIndex !== 0) {
|
||
if (rowIndex <= 1) { return false }
|
||
if (rowIndex % 2 === 0) {
|
||
return {
|
||
rowspan: 2,
|
||
colspan: 1
|
||
};
|
||
} else {
|
||
return {
|
||
rowspan: 0,
|
||
colspan: 0
|
||
};
|
||
}
|
||
}
|
||
},
|
||
switchInfo(num) {
|
||
if (num === 5) {
|
||
this.dataList = [{
|
||
name: '路径图背景',
|
||
progress: '99',
|
||
title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导',
|
||
status: 0
|
||
}, {
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗前培JT辅导OJT辅导',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗前',
|
||
status: 2
|
||
},
|
||
{
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗位',
|
||
status: 0
|
||
},
|
||
{
|
||
name: '路径图背景',
|
||
progress: '10',
|
||
title: '岗前岗前',
|
||
status: 1
|
||
}]
|
||
return false
|
||
}
|
||
if (num === 7) {
|
||
this.dataList = [{
|
||
name: '路径图背景7',
|
||
progress: '99',
|
||
title: '特训营/校招GROW180/社招入职',
|
||
status: 0
|
||
}, {
|
||
name: '路径图背景7',
|
||
progress: '10',
|
||
title: '入模培训',
|
||
status: 2
|
||
},
|
||
{
|
||
name: '路径图背景7',
|
||
progress: '10',
|
||
title: '岗前培训+OJT辅导',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '路径图背景7',
|
||
progress: '10',
|
||
title: 'BOE薪酬福利体系',
|
||
status: 0
|
||
},
|
||
{
|
||
name: '路径图背景7',
|
||
progress: '10',
|
||
title: 'PDCA循环工作法',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '路径图背景7',
|
||
progress: '10',
|
||
title: '如何让沟通更有效率',
|
||
status: 2
|
||
},
|
||
{
|
||
name: '路径图背景7',
|
||
progress: '10',
|
||
title: '商务邮件撰写技巧',
|
||
status: 1
|
||
}]
|
||
return false
|
||
}
|
||
if (num === 14) {
|
||
this.dataList = [{
|
||
name: '路径图背景全',
|
||
progress: '99',
|
||
title: '特训营/校招GROW180/社招入职',
|
||
status: 0
|
||
}, {
|
||
name: '路径图背景全',
|
||
progress: '10',
|
||
title: '入模培训',
|
||
status: 2
|
||
},
|
||
{
|
||
name: '路径图背景全',
|
||
progress: '10',
|
||
title: '岗前培训+OJT辅导',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '路径图背景全',
|
||
progress: '10',
|
||
title: 'BOE薪酬福利体系',
|
||
status: 0
|
||
},
|
||
{
|
||
name: '路径图背景全',
|
||
progress: '10',
|
||
title: 'PDCA循环工作法',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '路径图背景全',
|
||
progress: '10',
|
||
title: '如何让沟通更有效率',
|
||
status: 2
|
||
},
|
||
{
|
||
name: '路径图背景全',
|
||
progress: '10',
|
||
title: '商务邮件撰写技巧',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '路径图背景全',
|
||
progress: '10',
|
||
title: '商务邮件撰写技巧',
|
||
status: 1
|
||
}, {
|
||
name: '路径图背景全',
|
||
progress: '99',
|
||
title: '特训营/校招GROW180/社招入职',
|
||
status: 0
|
||
}, {
|
||
name: '路径图背景全',
|
||
progress: '99',
|
||
title: '特训营/校招GROW180/社招入职',
|
||
status: 2
|
||
}, {
|
||
name: '路径图背景全',
|
||
progress: '99',
|
||
title: '特训营/校招GROW180/社招入职',
|
||
status: 0
|
||
}, {
|
||
name: '路径图背景全',
|
||
progress: '99',
|
||
title: '特训营/校招GROW180/社招入职',
|
||
status: 1
|
||
}, {
|
||
name: '路径图背景全',
|
||
progress: '99',
|
||
title: '特训营/校招',
|
||
status: 2
|
||
}, {
|
||
name: '路径图背景全',
|
||
progress: '99',
|
||
title: '特训营/校招',
|
||
status: 0
|
||
}]
|
||
}
|
||
},
|
||
showClass(flag) {
|
||
if (flag) {
|
||
this.showUClass = flag;
|
||
}
|
||
},
|
||
emitInput(val) {
|
||
this.queryKeyWord = val;
|
||
this.isSeach = true;
|
||
this.search();
|
||
},
|
||
getColor(status, index) {
|
||
return this.colorAttrValue[status][index]
|
||
},
|
||
getPosition(name, index) {
|
||
return this.iconAttrs[name].positions[index]
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep .el-dialog__header {
|
||
border-bottom: 1px solid #E8E8E8;
|
||
padding-bottom: 20px;
|
||
|
||
.dialog-header {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 18px;
|
||
color: #333333;
|
||
|
||
.otherImg {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 40px;
|
||
|
||
img {
|
||
width: 27px;
|
||
height: 24px;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.address {
|
||
position: absolute;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
|
||
&:before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 50px;
|
||
height: 50px;
|
||
clip: rect(26px 100px 50px 26px);
|
||
background: inherit;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.icon-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
text-align: center;
|
||
transform: translate(-50%, -50%);
|
||
width: 36px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
// background-color: #8bc94b;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.iconTitle {
|
||
position: absolute;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
background: linear-gradient(301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
|
||
border-radius: 80px 80px 80px 8px;
|
||
padding: 0 20px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.growth-content {
|
||
position: relative;
|
||
height: 100vh;
|
||
|
||
.pathdetails {
|
||
padding: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.pdname {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
margin-top: 17px;
|
||
}
|
||
|
||
.detailinfo {
|
||
position: relative;
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
padding: 23px 25px;
|
||
min-width: 1380px;
|
||
|
||
.btn {
|
||
position: absolute;
|
||
left: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.select {
|
||
position: absolute;
|
||
top: 30px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.select-radio {
|
||
margin-left: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
|
||
span {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 4px;
|
||
margin-right: 9px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detailContent {
|
||
width: 100%;
|
||
margin: 80px 0 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.detailbgc {
|
||
width: 1380px;
|
||
height: 699px;
|
||
min-width: 1380px;
|
||
position: relative;
|
||
background-image: url('../../assets/images/growth/firstRoadmap.png');
|
||
background-repeat: no-repeat;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: 737px;
|
||
background-image: url('../../assets/images/growth/begin.png');
|
||
background-repeat: no-repeat;
|
||
width: 190px;
|
||
height: 55px;
|
||
z-index: 1000;
|
||
}
|
||
}
|
||
|
||
.detailAllbgc {
|
||
width: 1380px;
|
||
height: 1590px;
|
||
min-width: 1380px;
|
||
position: relative;
|
||
background-image: url('../../assets/images/growth/roadmap.png');
|
||
background-repeat: no-repeat;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 750px;
|
||
background-image: url('../../assets/images/growth/begin.png');
|
||
background-repeat: no-repeat;
|
||
width: 190px;
|
||
height: 55px;
|
||
z-index: 1000;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footerBtn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.el-button {
|
||
width: 100px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
.u-class {
|
||
::v-deep .el-dialog {
|
||
border-radius: 15px;
|
||
|
||
.el-dialog__headerbtn .el-dialog__close {
|
||
color: white;
|
||
position: absolute;
|
||
z-index: 99;
|
||
right: 15px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-dialog__body {
|
||
padding: 0px;
|
||
}
|
||
|
||
.ClassBoxContent {
|
||
width: 100%;
|
||
height: 456px;
|
||
// background: red;
|
||
border-radius: 15px;
|
||
|
||
.ContentBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 9;
|
||
display: flex;
|
||
|
||
.left,
|
||
.right {
|
||
height: calc(100% - 30px);
|
||
}
|
||
|
||
.left {
|
||
padding-left: 30px;
|
||
width: 48%;
|
||
|
||
.title {
|
||
width: 200px;
|
||
height: 59px;
|
||
line-height: 59px;
|
||
text-align: center;
|
||
margin-left: -8px;
|
||
font-size: 38px;
|
||
color: white;
|
||
margin-top: 42.97px;
|
||
padding-top: 5px;
|
||
text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
|
||
}
|
||
|
||
.jy {
|
||
color: white;
|
||
font-size: 20px;
|
||
margin-top: 87.53px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.msg {
|
||
margin-top: 5px;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
width: 326px;
|
||
text-align: justify;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.bottom {
|
||
width: 100px;
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
margin-top: 40px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
// padding-left: 10px;
|
||
width: 50%;
|
||
|
||
.tyl {
|
||
cursor: pointer;
|
||
width: calc(100% - 20px);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
height: 160px;
|
||
margin-top: 83px;
|
||
|
||
.tyl_title {
|
||
width: 100%;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
|
||
.tyl_title_img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.tyl_title_msg {
|
||
font-size: 20px;
|
||
margin-left: 10px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.tyl_jy {
|
||
margin-top: 6.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding-left: 20px;
|
||
color: #333333;
|
||
}
|
||
|
||
.tyl_msg {
|
||
width: 350.36px;
|
||
margin-top: 13px;
|
||
margin-left: 20px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
|
||
.tyl:hover {
|
||
border: 0.96px solid rgba(140, 105, 242, 1);
|
||
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
|
||
}
|
||
|
||
.cyl {
|
||
cursor: pointer;
|
||
width: calc(100% - 20px);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
height: 160px;
|
||
margin-top: 10px;
|
||
|
||
.tyl_title {
|
||
width: 100%;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
|
||
.tyl_title_img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.tyl_title_msg {
|
||
font-size: 20px;
|
||
margin-left: 10px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.tyl_jy {
|
||
margin-top: 6.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding-left: 20px;
|
||
color: #333333;
|
||
}
|
||
|
||
.tyl_msg {
|
||
width: 350.36px;
|
||
margin-top: 13px;
|
||
margin-left: 20px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
|
||
.cyl:hover {
|
||
border: 0.96px solid rgba(140, 105, 242, 1);
|
||
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 835px;
|
||
margin-left: -1px;
|
||
margin-top: -1px;
|
||
position: absolute;
|
||
top: 0px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|