|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="message">
|
|
|
<div class="conten">
|
|
|
- <h2 class="title">留言板</h2>
|
|
|
+ <h2 class="title">留 言 板</h2>
|
|
|
<ul class="liuyan" v-if="data.length>0">
|
|
|
<li v-for="item in data" :key="item.id">
|
|
|
<div class="name">{{item.creatorName}}</div>
|
|
|
@@ -28,22 +28,26 @@
|
|
|
show-word-limit
|
|
|
resize="none"
|
|
|
type="textarea"
|
|
|
- :rows="4"
|
|
|
- placeholder="请输入留言内容，字数在100字以内。"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="欢迎提交您的珍贵留言，100字以内~"
|
|
|
v-model="textarea"
|
|
|
>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="button">
|
|
|
+ <div class="button_left">
|
|
|
+ <div class="biaoji"></div>
|
|
|
<el-input
|
|
|
+ style="width:270px"
|
|
|
type="text"
|
|
|
- placeholder="请输入您的姓名"
|
|
|
+ placeholder="请填写您的姓名"
|
|
|
v-model="name"
|
|
|
maxlength="8"
|
|
|
show-word-limit
|
|
|
>
|
|
|
</el-input>
|
|
|
- <el-button type="primary" @click="commentSave">提 交</el-button>
|
|
|
+ </div>
|
|
|
+ <el-button style="width:120px;color: #d7b07e;" type="primary" @click="commentSave">提 交</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -158,24 +162,27 @@ export default {
|
|
|
height: 100vh;
|
|
|
min-height: 700px;
|
|
|
.conten {
|
|
|
+ background: url('../../assets/img/mesBac.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-top: 8px solid #BE1220;
|
|
|
+ border-bottom: 8px solid #BE1220;
|
|
|
/deep/.el-button--primary{
|
|
|
+ background-color: #b92e2e;
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
}
|
|
|
/deep/.el-pager li {
|
|
|
- background-color: #d5d5d5;
|
|
|
- color: #fff;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
/deep/.el-pager li.active {
|
|
|
- background-color: #b9412e;
|
|
|
+ color: #B92E2E;
|
|
|
}
|
|
|
/deep/.el-pagination button {
|
|
|
- border-radius: 5px;
|
|
|
- background-color: #d5d5d5;
|
|
|
- color: #fff;
|
|
|
+ background-color: transparent;
|
|
|
}
|
|
|
/deep/.el-pagination button:disabled {
|
|
|
- background-color: #fff;
|
|
|
+ background-color: transparent;
|
|
|
}
|
|
|
|
|
|
position: absolute;
|
|
|
@@ -187,8 +194,8 @@ export default {
|
|
|
background-color: #fff;
|
|
|
padding: 20px;
|
|
|
.title {
|
|
|
- text-align: center;
|
|
|
- color: #154916;
|
|
|
+ padding-left: 20px;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
.liuyan::-webkit-scrollbar {
|
|
|
/*滚动条整体样式*/
|
|
|
@@ -199,7 +206,7 @@ export default {
|
|
|
/*滚动条里面小方块*/
|
|
|
border-radius: 10px;
|
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- background: #b9412e;
|
|
|
+ background: rgba(185, 46, 46, .3);
|
|
|
}
|
|
|
.liuyan::-webkit-scrollbar-track {
|
|
|
/*滚动条里面轨道*/
|
|
|
@@ -208,12 +215,14 @@ export default {
|
|
|
background: transparent;
|
|
|
}
|
|
|
.liuyan {
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
padding-right: 20px;
|
|
|
- margin: 20px auto 0;
|
|
|
- width: 94%;
|
|
|
- height: 420px;
|
|
|
+ margin: 20px 20px 0;
|
|
|
+ padding: 15px;
|
|
|
+ height: 380px;
|
|
|
overflow-y: auto;
|
|
|
li {
|
|
|
+ border-bottom: 1px dashed #B92E2E;
|
|
|
color: #878787;
|
|
|
font-size: 16px;
|
|
|
display: flex;
|
|
|
@@ -239,20 +248,23 @@ export default {
|
|
|
font-size: 26px;
|
|
|
}
|
|
|
.pagination {
|
|
|
+ padding: 20px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 920px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- width: 380px;
|
|
|
- margin: 20px auto;
|
|
|
+ align-items: center;
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
.bottmInp {
|
|
|
/deep/.el-textarea__inner:focus {
|
|
|
border-color: #b9412e;
|
|
|
}
|
|
|
/deep/.el-textarea__inner {
|
|
|
- background-color: #ededed;
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
/deep/.el-input__inner {
|
|
|
- background-color: #ededed;
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
/deep/.el-textarea .el-input__count {
|
|
|
background-color: transparent;
|
|
|
@@ -262,21 +274,38 @@ export default {
|
|
|
background-color: transparent;
|
|
|
color: #878787;
|
|
|
}
|
|
|
+ margin-top: 15px;
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 95px;
|
|
|
- .texe {
|
|
|
- width: 660px;
|
|
|
- margin-left: 30px;
|
|
|
- }
|
|
|
+ padding: 0 20px;
|
|
|
}
|
|
|
.button {
|
|
|
- margin-right: 40px;
|
|
|
- width: 160px;
|
|
|
+ margin-top: 15px;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
+ .button_left{
|
|
|
+ width: 300px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .biaoji{
|
|
|
+ position: relative;
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #b9412e;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #b9412e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
