Skip to content

B
bms-vue-obear
Commit b4de2c0e authored by huai.li's avatar huai.li
Browse files
Options

留言模块样式雏形

parent 47f138a7
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 3 deletions
src/assets/css/app.scss
View file @ b4de2c0e
......@@ -2,7 +2,7 @@
.mb20 {
margin-bottom:20px;
}
.el-button--cancel {
color:white;
background-color: #EB7567;
......
src/components/common/leaveMessage.vue
View file @ b4de2c0e
......@@ -11,6 +11,123 @@
</el-col>
</el-row>
<div class="page-body-content leaveMessage">
<div class="detailBox">
<div class="titleBox">
<div class="commentText">
<div class="date sub-text">
<el-row :gutter="20">
<el-col :span="6"><span>客户名称：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>内容：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>待办时间：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>状态：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>开始时间：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>结束时间：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>重复：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>负责人：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><span>创建时间：</span></el-col>
<el-col :span="18"><span>北京爱思泰尔技术开发有限责任公司</span></el-col>
</el-row>
</div>
<form class="form-inline form-comment" role="form">
<div class="input-group">
<input type="text" class="form-control form-control-sm comment-input" placeholder="">
<span class="input-group-btn">
<el-button size="mini">发送</el-button>
</span>
</div>
</form>
</div>
</div>
<div class="actionBox">
<ul class="commentList">
<li>
<div class="commenterImage">
<img />
</div>
<div class="commentText">
<div class="comment-title">
曹永生 2019-03-19 18:26:02
<a href="#" class="addcomment">
<i class="fa fa-fw fa-commenting-o pull-right"></i>
</a>
<a href="#" class="removecomment">
<i class="fa fa-fw fa-trash-o pull-right"></i>
</a>
</div>
<div class="date sub-text">
1
<form class="form-inline form-comment" role="form">
<div class="input-group">
<input type="text" class="form-control form-control-sm comment-input" placeholder="">
<span class="input-group-btn">
<el-button size="mini">回复</el-button>
</span>
</div>
</form>
</div>
<ul>
<li>
<div class="commenterImage">
<img />
</div>
<div class="commentText">
<div class="comment-title">
曹永生 2019-03-19 18:26:02
<a href="#" class="addcomment">
<i class="fa fa-fw fa-commenting-o pull-right"></i>
</a>
</div>
<div class="date sub-text">
1
</div>
</div>
</li>
<li>
<div class="commenterImage">
<img />
</div>
<div class="commentText">
<div class="comment-title">
曹永生 2019-03-19 18:26:02
<a href="#" class="addcomment">
<i class="fa fa-fw fa-commenting-o pull-right"></i>
</a>
</div>
<div class="date sub-text">
1
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
......@@ -31,6 +148,97 @@
}
</script>
<style scoped lang="scss">
.pull-right {
float: right;
}
.page-body-content {
& .actionBox {
padding: 10px 0;
& .commentList {
padding: 0;
list-style: none;
li {
margin: 0;
margin-top: 10px;
list-style: none;
}
& .commenterImage {
width: 48px;
margin-right: 5px;
height: 100%;
float: left;
img {
width: 100%;
border-radius: 50%;
}
}
& .commentText {
padding: 0 0 10px;
margin-left: 60px;
& .comment-title {
color: #fff;
padding: 10px 10px 8px;
margin: 0;
background-color: #5a6277;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
font-size:12px;
}
& .addcomment {
color: white;
}
& .removecomment {
color: white;
}
& a {
.fa-fw {
color: white;
font-size:12px;
text-align: center;
}
}
& .sub-text {
background-color: #5a6277;
color: #fff;
font-size: 12px;
padding: 10px;
}
}
}
}
& .detailBox {
margin: 0;
min-height: 100%;
& .titleBox {
padding: 10px;
background: #4e5365;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
& .commentText {
padding: 0 0 10px;
& .sub-text {
& .el-row {
font-size: 12px;
.el-col:first-child {
text-align: right;
font-weight:700;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 3px;
}
.el-col:last-child {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 3px;
}
}
}
}
}
}
}
.lm-content {
position: fixed;
top: 100px;
......@@ -39,15 +247,53 @@
width: 60%;
background-color:#333744;
color: white;
& i {
font-size: 14px;
& .content {
width: 100%;
}
& i[class~=fa-angle-double-right] {
cursor:pointer;
font-size: 20px;
margin-top: 6px;
margin-left: 10px;
}
& .form-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
& .input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
margin-top: 10px;
& .form-control {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}
& .comment-input {
height: 28px;
}
}
}
}
.lm-content-leaveMessage {
text-align:center;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 14px;
}
.move-enter-active, .move-leave-active {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment