一、修改element-ui
/第三方库
里面的自带样式
第一种、没有引入less时的写法
第二种、引入less时的写法
方法一、/deep/
方法二、::v-deep
二、 vertical-align:top;
把第一种样式变成第二种样式的方法:
三、时间线
HTML:
<div class="student_con_right common_style">
<div class="student_career">
<div class="student_career_header">
<ul>
<li>学员生涯</li>
<li>
<img
src="../../assets/img/studentDetail/studentCareer_header_add.png"
alt=""
/>
</li>
</ul>
</div>
<div class="student-career">
<ul>
<li>成长</li>
<p>2021.03.02</p>
</ul>
<ul>
<li>在校区报名</li>
<p>在王老师XXXXXXXXXXXXXXXXXXXXXXXX</p>
</ul>
<ul>
<span>
<img src="../../assets/img/studentDetail/studentCareer_edit.png" alt="">
</span>
<span>
<img src="../../assets/img/studentDetail/studentCareer_delete.png" alt="">
</span>
</ul>
</div>
<div class="student-career">
<ul>
<li>成长</li>
<p>2021.03.02</p>
</ul>
<ul>
<li>在校区报名</li>
<p>在王老师XXXXXXXXXXXXXXXXXXXXXXXX</p>
</ul>
<ul>
<span>
<img src="../../assets/img/studentDetail/studentCareer_edit.png" alt="">
</span>
<span>
<img src="../../assets/img/studentDetail/studentCareer_delete.png" alt="">
</span>
</ul>
</div>
<div class="student-career">
<ul>
<li>成长</li>
<p>2021.03.02</p>
</ul>
<ul>
<li>在校区报名</li>
<p>在王老师XXXXXXXXXXXXXXXXXXXXXXXX</p>
</ul>
<ul>
<span>
<img src="../../assets/img/studentDetail/studentCareer_edit.png" alt="">
</span>
<span>
<img src="../../assets/img/studentDetail/studentCareer_delete.png" alt="">
</span>
</ul>
</div>
<div class="student-career">
<ul>
<li>今日</li>
</ul>
<ul>
<li><img src="../../assets/img/studentDetail/studentCareer_addThing.png" alt=""></li>
</ul>
<ul>
<li>添加事迹</li>
</ul>
</div>
</div>
</div>
CSS:
li {
list-style: none;
}
.common_style {
padding: 1.5rem;
background-color: #fff;
border-radius: 0.5rem;
}
// 标题
.student_con_right {
flex: 1;
}
.student_career_header {
margin-bottom: 2.5rem;
}
.student_career_header ul {
display: flex;
justify-content: space-between;
align-items: center;
}
.student_career_header ul li:first-child {
font-size: 16px;
font-family: Source Han Sans CN;
color: #525252;
}
.student_career_header ul li:last-child {
display: inline-block;
width: 16px;
height: 16px;
}
.student_career_header ul li:last-child img {
width: 100%;
height: 100%;
object-fit: cover;
}
// 内容部分
.student-career{
display: flex;
ul{padding:0 1rem 1rem;}
ul:first-child{
width: 20%;
text-align: center;
min-width: 20%;
p{
font-size: 0.75rem;
color: #525252;
margin: 0.5rem 0;
}
}
ul:nth-child(2){
width: 60%;
box-sizing: border-box;
position: relative;
p{
font-size: 0.75rem;
color: #999999;
margin: 0.5rem 0;
}
&::before{
content:'';
position: absolute;
top: 0.5rem;
left: 0;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background-color: @mainColor;
}
&::after{
content:'';
position: absolute;
left: calc(0.55rem / 2 - 1px);
top: 1.5rem;
height: 70%;
width: 2px;
background-color: @mainColor;
}
}
ul:nth-child(3){
// padding: 0 0 1rem 1rem;
width: 20%;
display: flex;
span {
display: inline-block;
width: 1.4rem;
height: 1.4rem;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
.student-career:last-child{
ul:nth-child(2){
&::after{
display: none;
}
}
ul:nth-child(2) {
width: 2%;
min-width: 2%;
li {
padding-top: 0.2rem;
width: 1rem;
height: 1rem;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
ul:last-child {
padding:0 0 0 0.5rem;
}
}
结果:
四、 PC端-Element-dialog对话框-弹窗
举例:
对应代码:
<el-button type="text" @click="dialogTableVisible = true">添加事迹</el-button>
<el-dialog :visible.sync="dialogTableVisible">
<div slot="title" class="title">添加事迹</div>
<div class="customer_tracking_body">
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline"
>
<el-form-item label="类型:">
<el-select
v-model="formInline.region"
placeholder="请选择"
>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间:">
<el-input
v-model="formInline.time"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="主题:">
<el-input
v-model="formInline.title"
placeholder="请输入主题"
></el-input>
</el-form-item>
</el-form>
<div class="thing_content">
<label for="content" class="content">内容:</label>
<el-input
id="content"
type="textarea"
:autosize="{ minRows: 4, maxRows: 4 }"
placeholder="请输入内容"
v-model="textarea2"
>
</el-input>
</div>
<div class="upload_pic">
<label for="upload_pic" class="picture">图片:</label>
<el-upload
id="upload_pic"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
<div class="addThings_btns">
<div class="confirm">
<p>确认添加</p>
</div>
<div class="cancel">
<p>取消</p>
</div>
</div>
</div>
</el-dialog>
对应代码:
gridData: [{}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: "",
},
formLabelWidth: "120px",
formInline: {
time: "",
title: "",
region: "",
},
textarea2: "",
dialogImageUrl: "",
dialogVisible: false,
.title {
position: relative;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 700;
color: #525252;
margin-top: 2rem;
letter-spacing: 0.1rem;
margin-left: 1rem;
&:before {
position: absolute;
left: -1rem;
top: 0rem;
content: "";
width: 3px;
height: 23px;
background-color: @mainColor;
}
}
/deep/ .el-dialog__header {
padding: 20px 30px !important;
border-radius: 0.5rem 0.5rem 0 0;
}
/deep/ .el-dialog {
width: 25%;
border-radius: 0.5rem;
margin-top: 16vh !important;
}
/deep/ .el-dialog__headerbtn {
top: 20px;
right: 30px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
color: #525252;
font-weight: 700;
}
.customer_tracking_body {
padding: 0 1rem;
}
.content {
padding: 0 12px 0 0;
vertical-align: top;
}
/deep/.el-textarea {
width: 75%;
}
.upload_pic {
margin-bottom: 4rem;
display: flex;
}
.picture {
padding: 0 12px 0 0;
}
.addThings_btns {
display: flex;
width: 100%;
height: 2.2rem;
padding: 0 6rem;
box-sizing: border-box;
justify-content: space-between;
.confirm {
cursor: pointer;
width: 6.5rem;
height: 100%;
text-align: center;
background-color: @mainColor;
border-radius: 1rem;
p {
line-height: 2.2rem;
font-size: 16px;
font-family: Source Han Sans CN;
color: #ffffff;
letter-spacing: 0.06rem;
}
}
.cancel {
cursor: pointer;
width: 4.5rem;
height: 100%;
text-align: center;
background-color: #c2c2c2;
border-radius: 1rem;
p {
line-height: 2.2rem;
font-size: 16px;
font-family: Source Han Sans CN;
color: #ffffff;
letter-spacing: 0.06rem;
}
}
}
/deep/.el-input {
font-size: 12px;
}
.thing_content {
margin-bottom: 22px;
}
/deep/.el-upload--picture-card:hover,
.el-upload:focus {
border-color: @mainColor;
color: @mainColor;
}
/deep/.el-upload--picture-card {
width: 64px;
height: 64px;
line-height: 73px;
}
/deep/.el-dialog__body {
padding-bottom: 60px;
}
/deep/.el-textarea textarea::-webkit-input-placeholder {
/* WebKit browsers */
font-size: 14px;
font-family: Source Han Sans CN;
color: #c2c2c2;
}
/deep/.el-textarea textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-size: 14px;
font-family: Source Han Sans CN;
color: #c2c2c2;
}
/deep/.el-textarea textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size: 14px;
font-family: Source Han Sans CN;
color: #c2c2c2;
}
/deep/.el-textarea textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size: 14px;
font-family: Source Han Sans CN;
color: #c2c2c2;
}
结果:
【补充:移动端-Popup弹出层】