hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-07 01:46:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

路径图整体修改

Browse Source
This commit is contained in:
zhangsir
2024-05-10 18:22:06 +08:00
parent e82ea0709d
commit 3f2db4136c
11 changed files with 1337 additions and 892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/growth/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 649 B

BIN
src/assets/images/growth/fileBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/growth/growthLeft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 B

BIN
src/assets/images/growth/growthRight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
src/assets/images/growth/growthTime.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 503 B

BIN
src/assets/images/growth/mark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 B

BIN
src/assets/images/growth/ppt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 B

2
src/components/UserCenter/menu.vue
View File

@@ -258,7 +258,7 @@
<!-- <i class="el-icon-menu"></i> -->
<span slot="title" class="textl">我的考试</span>
</el-menu-item>
<el-menu-item index="/growth">
<el-menu-item index="/uc/study/growth">
<span slot="title" class="textl">成长路径</span>
</el-menu-item>
<!-- 去掉

13
src/router/index.js
View File

@@ -110,11 +110,18 @@ export const constantRoutes = [{
name: 'course',
meta: { title: '课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
},
// {
// path: '/growth',
// hidden: true,
// component: (resolve) => require(['@/views/study/Growth'], resolve),
// name: 'growth',
// meta: { title: '成长路径', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
// },
{
path: '/growth',
path: '/growthpath',
hidden: true,
component: (resolve) => require(['@/views/study/Growth'], resolve),
name: 'growth',
component: (resolve) => require(['@/views/study/GrowthPath'], resolve),
name: 'growthpath',
meta: { title: '成长路径图', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
},
{

1276
src/views/study/Growth.vue
View File

File diff suppressed because it is too large Load Diff

938
src/views/study/GrowthPath.vue Normal file
View File

@@ -0,0 +1,938 @@
<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" 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="click"
: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="arraySpanMethod" style="width: 100%">
<el-table-column fixed align="center" property="name" width="120" label=""></el-table-column>
<el-table-column align="center" label="band1">
<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="band2">
<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="band3">
<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="band4">
<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="band5">
<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="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: 'GrowthPath',
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: '市场企划岗',
marketStatus: 0,
saleStatus: 1,
productStatus: 2,
FAEStatusL: 0,
salesManagement: 1
}, {
name: '销售岗',
marketStatus: 1,
saleStatus: 2,
productStatus: 1,
FAEStatusL: 0,
salesManagement: 1
}, {
name: '产品企划岗',
marketStatus: 2,
saleStatus: 0,
productStatus: 0,
FAEStatusL: 0,
salesManagement: 1
}, {
name: 'FAE岗',
marketStatus: 0,
saleStatus: 1,
productStatus: 2,
FAEStatusL: 0,
salesManagement: 1
}, {
name: '销售管理岗位',
marketStatus: 1,
saleStatus: 2,
productStatus: 0,
FAEStatusL: 0,
salesManagement: 1
}],
drawer: false,
activeName: 'first'
};
},
mounted() {
},
methods: {
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
handleClick(tab, event) {
console.log(tab, event);
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
return [1, 2];
} else if (columnIndex === 2) {
return [0, 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%);
cursor: pointer;
.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>