|
|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <div class="message">
|
|
|
+ <div class="conten">
|
|
|
+ <h2 class="title">留言板</h2>
|
|
|
+ <ul class="liuyan">
|
|
|
+ <li v-for="i in 20" :key="i">
|
|
|
+ <div class="name">王大锤锤锤</div>
|
|
|
+ <div class="con">
|
|
|
+ 快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐！~
|
|
|
+ </div>
|
|
|
+ <div class="time">2022.1.4 17:34</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- 分页器 -->
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="50"
|
|
|
+ @current-change="currentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 文本域和按钮 -->
|
|
|
+ <div class="bottmInp">
|
|
|
+ <div class="texe">
|
|
|
+ <el-input
|
|
|
+ maxlength="100"
|
|
|
+ show-word-limit
|
|
|
+ resize="none"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入留言内容，字数在100字以内。"
|
|
|
+ v-model="textarea"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="button">
|
|
|
+ <el-input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入您的姓名"
|
|
|
+ v-model="name"
|
|
|
+ maxlength="5"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary">提 交</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+// 例如：import 《组件名称》 from '《组件路径》';
|
|
|
+
|
|
|
+export default {
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ textarea: '',
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 分页器方法
|
|
|
+ currentChange (val) {
|
|
|
+ console.log('当前页改变了', val)
|
|
|
+ // this.getList({ pageNum: val, pageSize: 10 });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created () {},
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+/deep/.el-input__inner::-webkit-input-placeholder {
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+/deep/.el-input__inner:-moz-placeholder {
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+/deep/.el-input__inner::-moz-placeholder {
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+/deep/.el-input__inner:-ms-input-placeholder {
|
|
|
+ /* Internet Explorer 10+ */
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+/deep/.el-textarea__inner::-webkit-input-placeholder {
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+/deep/.el-textarea__inner:-moz-placeholder {
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+/deep/.el-textarea__inner::-moz-placeholder {
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+/deep/.el-textarea__inner:-ms-input-placeholder {
|
|
|
+ /* Internet Explorer 10+ */
|
|
|
+ color: #878787 !important;
|
|
|
+}
|
|
|
+.message {
|
|
|
+ width: 1000px;
|
|
|
+ height: 700px;
|
|
|
+ .conten {
|
|
|
+ /deep/.el-button--primary{
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ /deep/.el-pager li {
|
|
|
+ background-color: #d5d5d5;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /deep/.el-pager li.active {
|
|
|
+ background-color: #b9412e;
|
|
|
+ }
|
|
|
+ /deep/.el-pagination button {
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #d5d5d5;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /deep/.el-pagination button:disabled {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ color: #154916;
|
|
|
+ }
|
|
|
+ .liuyan::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+ .liuyan::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #b9412e;
|
|
|
+ }
|
|
|
+ .liuyan::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ .liuyan {
|
|
|
+ padding-right: 20px;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ width: 94%;
|
|
|
+ height: 420px;
|
|
|
+ overflow-y: auto;
|
|
|
+ li {
|
|
|
+ color: #878787;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ & > div {
|
|
|
+ padding: 12px 0;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 130px;
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ width: 140px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ width: 380px;
|
|
|
+ margin: 20px auto;
|
|
|
+ }
|
|
|
+ .bottmInp {
|
|
|
+ /deep/.el-textarea__inner:focus {
|
|
|
+ border-color: #b9412e;
|
|
|
+ }
|
|
|
+ /deep/.el-textarea__inner {
|
|
|
+ background-color: #ededed;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: #ededed;
|
|
|
+ }
|
|
|
+ /deep/.el-textarea .el-input__count {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #878787;
|
|
|
+ }
|
|
|
+ /deep/.el-input__count-inner {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #878787;
|
|
|
+ }
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 95px;
|
|
|
+ .texe {
|
|
|
+ width: 660px;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ margin-right: 40px;
|
|
|
+ width: 160px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
