hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-09 10:56:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

style:合并

Browse Source
This commit is contained in:
李晓鸽
2022-09-15 09:07:55 +08:00
parent eb3a714396
commit 7d87467535
6 changed files with 182 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/roadmap/PathDetails.vue
View File

@@ -0,0 +1,109 @@
<template>
<div class="pathdetails">
<!-- 面包屑导航 -->
<div class="crumb">
<div>产品经理学习路径图</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700">路径图详情</div>
</div>
<!-- 面包屑导航 -->
<div class="pdname">中级产品经理</div>
<!-- 详细信息 -->
<div class="detailinfo">
<div class="detailL">
<div class="title">
<div class="titleL">序：产品经理从初级到中级</div>
<div class="titleR">
<img src="../../assets/image/pathdetails/circle.png" />
<div class="titleRT">进行中</div>
</div>
</div>
<div class="tag1">必修</div>
<div class="tag2">在线</div>
<div class="tag3">#通用力</div>
</div>
<div class="detailR"></div>
</div>
<!-- 详细信息 -->
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "PathDetails",
setup() {
const state = reactive({});
const handleClick = (tab, event) => {
console.log(tab, event);
};
return {
...toRefs(state),
handleClick,
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.pathdetails {
.crumb {
color: #fff;
display: flex;
font-size: 14px;
line-height: 24px;
}
.pdname {
font-size: 20px;
font-weight: 800;
color: #ffffff;
margin-top: 17px;
}
.detailinfo {
width: 100%;
margin-top: 24px;
display: flex;
.detailL {
flex: 1;
margin-right: 20px;
background: #ffffff;
border-radius: 8px;
padding-left: 45px;
padding-right: 45px;
padding-top: 23px;
.title {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(249, 249, 249, 1);
margin-top: 27px;
.titleL {
font-size: 16px;
font-weight: 800;
color: #333333;
margin-left: 27px;
}
.titleR {
display: flex;
align-items: center;
}
.titleR .titleRT {
font-size: 16px;
font-weight: 800;
color: #0060ff;
margin-right: 73px;
margin-left: 2px;
}
}
}
.detailR {
width: 434px;
min-height: 557px;
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
}
}
}
</style>