|
|
@@ -1,95 +1,32 @@
|
|
|
<template>
|
|
|
<div class="mainDiv">
|
|
|
- <el-breadcrumb separator=">">
|
|
|
- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>
|
|
|
- <a href="#">企业HR</a>
|
|
|
- </el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>
|
|
|
- <a href="/job/index">首页</a>
|
|
|
- </el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
- <el-divider></el-divider>
|
|
|
- <div class="mainDiv">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="grid-content bg-purple">
|
|
|
- <div class="imgDiv">
|
|
|
- <el-avatar shape="square" :size="70"
|
|
|
- fit="fit"
|
|
|
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
- ></el-avatar>
|
|
|
- </div>
|
|
|
- <h2>你好，方佳</h2>
|
|
|
- <div>湖北荆鹏软件集团有限公司</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="18">
|
|
|
- <div class="grid-content bg-purple rightDiv">
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-
|
|
|
+ <div class="main-row">
|
|
|
+ <div class="mainContainer main-headImg">123123</div>
|
|
|
+ <div class="mainContainer main-dataNum">123123</div>
|
|
|
+ </div>
|
|
|
+ <div class="mainContainer main-linkUrl">123123</div>
|
|
|
+ <div class="main-row">
|
|
|
+ <div class="mainContainer main-chart1">123123</div>
|
|
|
+ <div class="mainContainer main-chart2">123123</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.el-breadcrumb {
|
|
|
- margin: 10px;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.el-divider {
|
|
|
- margin: 5px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.demo-form-inline {
|
|
|
- margin-left: 10px;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-
|
|
|
-.button-group {
|
|
|
- margin-left: 10px;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-.el-main{
|
|
|
- background-color: #f3f3f4;
|
|
|
-}
|
|
|
-.el-row {
|
|
|
-
|
|
|
- margin: 20px 20px 20px 20px;
|
|
|
-&:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-}
|
|
|
-.el-col {
|
|
|
-border-radius: 4px;
|
|
|
-}
|
|
|
-.bg-purple-dark {
|
|
|
-background: #99a9bf;
|
|
|
-}
|
|
|
-.bg-purple {
|
|
|
-background: #d3dce6;
|
|
|
-}
|
|
|
-.bg-purple-light {
|
|
|
-background: #e5e9f2;
|
|
|
-}
|
|
|
-.grid-content {
|
|
|
-border-radius: 4px;
|
|
|
-height: 80px;
|
|
|
-line-height: 10px;
|
|
|
-padding: 20px;
|
|
|
-text-align: left;
|
|
|
-}
|
|
|
-.row-bg {
|
|
|
-padding: 10px 0;
|
|
|
-background-color: #f9fafc;
|
|
|
-}
|
|
|
-.imgDiv{
|
|
|
- float: left;
|
|
|
- display: inline;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
+ .main-row{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .mainContainer{
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+ border-radius: 3px;
|
|
|
+ transition: .2s;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .main-headImg{
|
|
|
+ height: 100px;
|
|
|
+ width: 260px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
</style>
|
