1111

src/components/fankuijilu/fankuijilu.css

@@ -0,0 +1,346 @@
+/* dev-mgr */
+.first-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  font-size: 20px;
+  /* padding: 32px 40px 53px 40px; */
+}
+
+#first-left {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 130px;
+}
+
+#logo {
+  /* margin-top: 40px; */
+  /* margin-bottom: 40px; */
+  width: 30px;
+  height: 30px;
+  background: url(../../../static/images/money1.png) 0 0 no-repeat;
+  background-size: 30px 30px;
+}
+
+.tag {
+  /* width: 95px; */
+  /* height: 22px; */
+  font-size: 22px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #1A202B;
+  /* line-height: 54px; */
+}
+
+.second-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 80px;
+	padding-top: 20px;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+>>>.demo-form-inline {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 18px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-right: 106px;
+}
+
+>>>.el-form-item__label {
+	margin: 0;
+	padding: 0;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+	width: 240px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+  margin-right: 20px;
+}
+
+.loudonghao>>>.el-input__inner {
+	width: 181px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+}
+
+.el-button {
+	width: 68px;
+	height: 40px;
+	background: #F88A64;
+	border-radius: 4px;
+	font-size: 18px;
+  padding-left: 15px;
+}
+
+>>>.el-table__header {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+}
+
+>>>.el-table__header .cell {
+	color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+	width: 24px;
+	height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+	margin: 3px 0 0 4px;
+	width: 4px;
+	height: 10px;
+}
+
+>>>.el-table__row .cell {
+	height: 35px;
+	line-height: 35px;
+	font-size: 18px;
+	color: #333333;
+}
+
+>>>.el-table__row .cell .el-button {
+	background: none;
+	margin: 0 20px 0 0;
+	width: 50px;
+	height: 35px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.el-icon {
+	width: 38px;
+	height: 38px;
+	line-height: 38px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+	margin: 0 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+>>>.el-form-item__label {
+	font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+	font-size: 18px;
+}
+
+.dialog-footer{
+  display: flex;
+  justify-content: space-around;
+  width: 380px;
+  margin-left: 120px;
+}
+
+.dialog-footer>>>.el-button--default {
+	border: 1px solid #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+  display: block;
+	height: 50px;
+  width: 140px;
+	background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	height: 50px;
+  width: 140px;
+
+}
+
+.my-dialog {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.forth-row .el-form {
+	margin-top: 10px;
+	white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+	width: 130px;
+}
+
+.right-tip {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.dialog-pages {
+	display: flex;
+	justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+	margin: 0 3px;
+	width: 30px;
+	height: 33px;
+	line-height: 33px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.all-money{
+  font-size: 36px;
+}
+.el-button--primary{
+  border-color: #F88A64;
+}
+
+.el-table__row .cell .el-button{
+  font-size: 14px;
+  color: #5488FE;
+  width: 60px;
+  height: 30px;
+  border-radius: 15px;
+  border: 1px solid #5488FE;
+  padding-top: 8px;
+  padding-left: 8px;
+}
+
+.font-color{
+  color:#FF520F;
+}
+
+#center{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  /* border: 1px solid yellow; */
+}
+
+#logo-center{
+  margin-top: 44px;
+  margin-bottom: 39px;
+  width: 107px;
+  height: 107px;
+  background: url(../../../static/images/logo-center.png) 0 0 no-repeat;
+  background-size: 107px 107px;
+  /* border: 1px solid red; */
+}
+
+#item-txt{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  /* border: 1px solid yellow; */
+  font-family: 'MicrosoftYaHei';
+  padding-bottom: 92px;
+}
+
+.item-text{
+  font-size: 22px;
+  color: #333333;
+}
+
+>>>.el-dialog__footer{
+  padding-bottom: 68px;
+}
+
+
+/* >>>.el-dialog--center .el-dialog__body{
+  padding-bottom: 92px;
+} */
+
+/* dev-mgr */

src/components/fankuijilu/fankuijilu.vue

@@ -0,0 +1,208 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="first-row">
+        <div id="first-left">
+          <div id="logo"></div>
+          <div class="tag">反馈记录</div>
+        </div>
+      </el-col>
+    </el-row>
+    <hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
+    <el-row>
+      <el-col :span="24" class="second-row">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="关键字：" class="shuibiaoId">
+            <el-input v-model="formInline.user" placeholder="请输入订单号或者姓名"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">搜索</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="third-row">
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
+          @selection-change="handleSelectionChange" highlight-current-row>
+          <el-table-column label="订单号" width="240" align="center">
+            <template slot-scope="scope">{{ scope.row.order }}</template>
+          </el-table-column>
+          <el-table-column prop="id" label="学号" width="240"></el-table-column>
+          <el-table-column prop="stuName" label="姓名" width="150"></el-table-column>
+          <el-table-column prop="tel" label="联系方式" width="200"></el-table-column>
+          <el-table-column prop="time" label="时间" width="260"></el-table-column>
+          <el-table-column prop="content" label="内容" width="300" id="content" widshow-overflow-tooltip></el-table-column>
+          <el-table-column label="操作" width="120" id="state">
+            <el-button id="show-btn" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">
+              {{scope.row.state}}
+            </el-button>
+          </el-table-column>
+        </el-table>
+        <div style="margin-top: 20px" class="table-footer">
+          <div class="pages">
+            <el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="forth-row">
+        <!-- 编辑对话框 -->
+        <el-dialog title="" :visible.sync="editdialogFormVisible" width="640px" height="487px" top="0vh"
+          class="my-dialog">
+          <div id="center">
+            <div id="logo-center"></div>
+          </div>
+          <div id="item-txt">
+            <span class="item-text">是否受理成功？</span>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="editdialogFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
+          </span>
+        </el-dialog>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        editdialogFormVisible: false,
+        delDialogVisible: false,
+        form: {
+          id: 'KB580002652',
+          drom: '18',
+          room: '118'
+        },
+        formLabelWidth: '120px',
+        formInline: {
+          user: '',
+          options: [{
+            value: '选项1',
+            label: '全部'
+          }, {
+            value: '选项2',
+            label: '黄金糕'
+          }],
+          value: '选项1'
+        },
+        tableData: [{
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容这里是反馈的内容这里是反馈的内容这里是反馈的内容这里是反馈的内容',
+          state: '已受理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容这里是反馈的内容这里是反馈的内容这里是反馈的内容这里是反馈的内容',
+          state: '未受理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容',
+          state: '未受理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容',
+          state: '未受理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容',
+          state: '未受理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容',
+          state: '未受理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容',
+          state: '未受理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          tel: '13677988965',
+          time: '2021/08/12 09:25:45',
+          content: '这里是反馈的内容',
+          state: '未受理'
+        }],
+        multipleSelection: [],
+        // font_color: [true,false,false,false,false,false,false,false]
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!')
+      },
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath)
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath)
+      },
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row)
+          })
+        } else {
+          this.$refs.multipleTable.clearSelection()
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+      handleEdit(index, row) {
+        this.editdialogFormVisible = true
+        console.log(index, row)
+      },
+      handleDelete(index, row) {
+        this.delDialogVisible = true
+        console.log(index, row)
+      }
+    },
+    created: function() {
+      // for(var i=0 ;i<this.tableData.length ;i++){
+      //   // console.log(this.tableData[i].state)
+      //   if(this.tableData[i].state=='支付失败'){
+      //     this.font_color=true
+      //   }else{
+      //     this.font_color=false
+      //   }
+      // }
+    }
+  }
+</script>
+
+<style scoped>
+  @import url("fankuijilu.css");
+</style>

src/components/orderList/orderList.css

@@ -0,0 +1,307 @@
+/* dev-mgr */
+.first-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  font-size: 20px;
+  /* padding: 32px 40px 53px 40px; */
+}
+
+#first-left {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 130px;
+}
+
+#logo {
+  /* margin-top: 40px; */
+  /* margin-bottom: 40px; */
+  width: 30px;
+  height: 30px;
+  background: url(../../../static/images/order1.png) 0 0 no-repeat;
+  background-size: 30px 30px;
+}
+
+.tag {
+  /* width: 95px; */
+  /* height: 22px; */
+  font-size: 22px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #1A202B;
+  /* line-height: 54px; */
+}
+
+>>>#first-right {
+  width: 210px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+>>>.first-right-btn {
+  width: 150px;
+  height: 46px;
+  font-size: 20px;
+  border-radius: 5px;
+  padding-left: 15px;
+  padding-top: 10px;
+}
+
+.second-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 80px;
+	padding-top: 20px;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+>>>.demo-form-inline {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 18px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-right: 106px;
+}
+
+>>>.el-form-item__label {
+	margin: 0;
+	padding: 0;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+	width: 240px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+}
+
+.loudonghao>>>.el-input__inner {
+	width: 181px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+}
+
+.el-button {
+	margin: 0 60px 0 40px;
+	width: 150px;
+	height: 40px;
+	background: #F88A64;
+	border-radius: 4px;
+	font-size: 18px;
+}
+
+>>>.el-table__header {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+}
+
+>>>.el-table__header .cell {
+	color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+	width: 24px;
+	height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+	margin: 3px 0 0 4px;
+	width: 4px;
+	height: 10px;
+}
+
+>>>.el-table__row .cell {
+	height: 35px;
+	line-height: 35px;
+	font-size: 18px;
+	color: #333333;
+}
+
+>>>.el-table__row .cell .el-button {
+	background: none;
+	margin: 0 20px 0 0;
+	width: 50px;
+	height: 35px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.el-icon {
+	width: 38px;
+	height: 38px;
+	line-height: 38px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+	margin: 0 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+>>>.el-form-item__label {
+	font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+	font-size: 18px;
+}
+
+.dialog-footer>>>.el-button--default {
+	border: 1px solid #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+	height: 46px;
+	background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	height: 46px;
+}
+
+.my-dialog {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.forth-row .el-form {
+	margin-top: 10px;
+	white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+	width: 130px;
+}
+
+.right-tip {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.dialog-pages {
+	display: flex;
+	justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+	margin: 0 3px;
+	width: 30px;
+	height: 33px;
+	line-height: 33px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.all-money{
+  font-size: 36px;
+}
+.el-button--primary{
+  border-color: #F88A64;
+}
+
+.el-button{
+  margin-left: 20px;
+}
+
+#show-btn{
+  border:none;
+}
+
+.font-color{
+  color:#FF520F;
+}
+/* dev-mgr */

src/components/orderList/orderList.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="first-row">
+        <div id="first-left">
+          <div id="logo"></div>
+          <div class="tag">订单管理</div>
+        </div>
+        <div id="first-right">
+          <el-button type="primary" class="first-right-btn">导出已缴表单</el-button>
+        </div>
+      </el-col>
+    </el-row>
+    <hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
+    <el-row>
+      <el-col :span="24" class="second-row">
+        <div class="total_balance">总金额：<span class="all-money">15898</span> 元</div>
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="关键字：" class="shuibiaoId">
+            <el-input v-model="formInline.user" placeholder="请输入订单号或者班级"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查找</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="third-row">
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
+          @selection-change="handleSelectionChange" highlight-current-row>
+          <el-table-column label="订单号" width="220" align="center">
+            <template slot-scope="scope">{{ scope.row.order }}</template>
+          </el-table-column>
+          <el-table-column prop="id" label="学号" width="250"></el-table-column>
+          <el-table-column prop="stuName" label="姓名" width="180"></el-table-column>
+          <el-table-column prop="class" label="班级" width="220"></el-table-column>
+          <el-table-column prop="money" label="金额(元)" width="160"></el-table-column>
+          <el-table-column prop="time" label="时间" width="260" widshow-overflow-tooltip></el-table-column>
+          <el-table-column label="状态" align="center" width="200">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.state === '支付失败' ? 'danger' : 'success'" disable-transitions>{{scope.row.state}}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <!--  <el-table-column label="状态" align="center" width="200">
+						<el-button id="show-btn" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)"> {{scope.row.state}}
+						</el-button>
+					</el-table-column> -->
+        </el-table>
+        <div style="margin-top: 20px" class="table-footer">
+          <div class="pages">
+            <el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="forth-row">
+        <!-- 编辑对话框 -->
+        <el-dialog title="充值记录" :visible.sync="editdialogFormVisible" width="640px" top="0vh" class="my-dialog">
+          <hr
+            style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
+          <div class="right-tip">共计：14578元</div>
+          <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-form-item label="筛选条件：">
+              <el-select v-model="formInline.region" placeholder="月份">
+                <el-option label="1月" value="shanghai"></el-option>
+                <el-option label="2月" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
+            @selection-change="handleSelectionChange" highlight-current-row>
+            <el-table-column align="center" label="时间">
+              <template slot-scope="scope">{{ scope.row.id }}</template>
+            </el-table-column>
+            <el-table-column align="center" prop="balance" label="金额" show-overflow-tooltip>
+            </el-table-column>
+          </el-table>
+          <div slot="footer" class="dialog-footer">
+            <div class="dialog-pages">
+              <el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+            </div>
+          </div>
+        </el-dialog>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        editdialogFormVisible: false,
+        delDialogVisible: false,
+        form: {
+          id: 'KB580002652',
+          drom: '18',
+          room: '118'
+        },
+        formLabelWidth: '120px',
+        formInline: {
+          user: '',
+          options: [{
+            value: '选项1',
+            label: '全部'
+          }, {
+            value: '选项2',
+            label: '黄金糕'
+          }],
+          value: '选项1'
+        },
+        tableData: [{
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付失败'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付成功'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付成功'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付成功'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付成功'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付成功'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付成功'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          state: '支付成功'
+        }],
+        multipleSelection: [],
+        // font_color: [true,false,false,false,false,false,false,false]
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!')
+      },
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath)
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath)
+      },
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row)
+          })
+        } else {
+          this.$refs.multipleTable.clearSelection()
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+      handleEdit(index, row) {
+        this.editdialogFormVisible = true
+        console.log(index, row)
+      },
+      handleDelete(index, row) {
+        this.delDialogVisible = true
+        console.log(index, row)
+      }
+    },
+    created: function() {
+      // for(var i=0 ;i<this.tableData.length ;i++){
+      //   // console.log(this.tableData[i].state)
+      //   if(this.tableData[i].state=='支付失败'){
+      //     this.font_color=true
+      //   }else{
+      //     this.font_color=false
+      //   }
+      // }
+    }
+  }
+</script>
+
+<style scoped>
+  @import url("orderList.css");
+</style>

src/components/payNameList/payNameList.css

@@ -0,0 +1,318 @@
+/* dev-mgr */
+
+.first-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  /* align-items: center; */
+  height: 50px;
+  font-size: 20px;
+  /* padding: 32px 40px 53px 40px; */
+}
+
+#first-left {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 130px;
+}
+
+#logo {
+  /* margin-top: 40px; */
+  /* margin-bottom: 40px; */
+  width: 30px;
+  height: 30px;
+  background: url(../../../static/images/name.png) 0 0 no-repeat;
+  background-size: 30px 30px;
+}
+
+.tag {
+  /* width: 95px; */
+  /* height: 22px; */
+  font-size: 22px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #000000;
+  /* line-height: 54px; */
+}
+
+>>>#first-right {
+  width: 210px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+>>>.first-right-btn {
+  width: 110px;
+  height: 46px;
+  font-size: 20px;
+  border-radius: 5px;
+  padding-left: 15px;
+  padding-top: 10px;
+}
+
+.second-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 80px;
+  padding-top: 39px;
+}
+
+.third-row {
+  margin-top: 10px;
+}
+
+>>>.demo-form-inline {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.el-form-item {
+  margin-bottom: 0px;
+}
+
+.total_balance {
+  font-size: 22px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #333333;
+}
+
+>>>.el-form-item__label {
+  margin: 0;
+  padding: 0;
+  font-size: 22px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+  width: 240px;
+  height: 40px;
+  border: 1px solid #4D4D4D;
+  border-radius: 4px;
+  font-size: 20px;
+}
+
+.shuibiaoId{
+  width: 260px;
+}
+
+.loudonghao>>>.el-input__inner {
+  width: 181px;
+  height: 40px;
+  border: 1px solid #4D4D4D;
+  border-radius: 4px;
+  font-size: 20px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #333333;
+  line-height: 54px;
+}
+
+/* .el-button {
+  margin: 0 60px 0 40px;
+  width: 100px;
+  height: 40px;
+  background: #298DEF;
+  border-radius: 4px;
+  font-size: 18px;
+} */
+
+>>>.el-table__header {
+  font-size: 20px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+}
+
+>>>.el-table__header .cell {
+  color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+  width: 24px;
+  height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+  margin: 3px 0 0 4px;
+  width: 4px;
+  height: 10px;
+}
+
+>>>.el-table__row .cell {
+  height: 35px;
+  line-height: 35px;
+  font-size: 18px;
+  color: #333333;
+}
+
+
+
+.el-pagination>>>.el-icon {
+  width: 38px;
+  height: 38px;
+  line-height: 38px;
+  border: 1px solid #626262;
+  border-radius: 2px;
+  font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+  margin: 0 5px;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  border: 1px solid #626262;
+  border-radius: 2px;
+  font-size: 18px;
+}
+
+.table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pages {
+  width: 1000px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+>>>.el-pager li.active {
+  color: #FFF;
+  font-weight: bold;
+  background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+  font-size: 20px;
+  padding-left: 10px;
+  /* display: block;
+  width: 525px;
+  height: 60px; */
+}
+
+>>>.el-form-item__label {
+  font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+  font-size: 16px;
+}
+
+.dialog-footer>>>.el-button--default {
+  border: 1px solid #298DEF;
+  border-radius: 4px;
+  font-size: 24px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #298DEF;
+  height: 46px;
+  background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+  background: #298DEF;
+  border-radius: 4px;
+  font-size: 24px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #FFFFFF;
+  height: 46px;
+}
+
+.my-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.forth-row .el-form {
+  margin-top: 10px;
+  white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+  width: 130px;
+}
+
+.right-tip {
+  font-size: 20px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #1A212B;
+  line-height: 34px;
+}
+
+.dialog-pages {
+  display: flex;
+  justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+  color: #FFF;
+  font-weight: bold;
+  background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #626262;
+  border-radius: 2px;
+  font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+  margin: 0 3px;
+  width: 30px;
+  height: 33px;
+  line-height: 33px;
+  border: 1px solid #626262;
+  border-radius: 2px;
+  font-size: 14px;
+}
+
+.el-divider__text,
+.el-link {
+  font-size: 20px;
+  color: #4392F7;
+}
+
+.show-btn{
+  font-size: 14px;
+  color: #5488FE;
+  width: 60px;
+  height: 30px;
+  border-radius: 15px;
+  border: 1px solid #5488FE;
+  padding-top: 8px;
+  padding-left: 16px;
+}
+
+>>>.el-dialog__body{
+  font-size: 16px;
+  padding: 40px 30px;
+}
+
+.view-balance{
+  margin-top: 29px;
+  color: #808080;
+  height: 17px;
+}
+
+/* dev-mgr */

src/components/payNameList/payNameList.vue

@@ -0,0 +1,197 @@
+<template>
+	<div>
+		<el-row>
+			<el-col :span="24" class="first-row">
+        <div id="first-left">
+          <div id="logo"></div>
+          <div class="tag">缴费名单</div>
+        </div>
+        <div id="first-right">
+          <el-button type="primary" class="first-right-btn">表格导入</el-button>
+          <div class="first-right-text">
+            <el-link>模板下载</el-link>
+          </div>
+        </div>
+			</el-col>
+		</el-row>
+    <hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
+		<el-row>
+			<el-col :span="24" class="second-row">
+				<div class="total_balance">关键字：</div>
+				<el-form :inline="true" :model="formInline" class="demo-form-inline">
+					<el-form-item class="shuibiaoId">
+						<el-input v-model="formInline.user" placeholder="请输入姓名或学号"></el-input>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="onSubmit">搜索</el-button>
+					</el-form-item>
+				</el-form>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24" class="third-row">
+				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
+					@selection-change="handleSelectionChange" highlight-current-row>
+					<el-table-column label="学号" width="300" align="center">
+						<template slot-scope="scope">{{ scope.row.id }}</template>
+					</el-table-column>
+					<el-table-column prop="stuName" label="姓名"  width="180"></el-table-column>
+          <el-table-column prop="institute" label="学院" width="260"></el-table-column>
+          <el-table-column prop="major" label="专业" width="220"></el-table-column>
+          <el-table-column prop="class" label="班级" width="220"></el-table-column>
+					<el-table-column prop="money" label="缴费余额（元）" width="220" widshow-overflow-tooltip></el-table-column>
+					<el-table-column label="操作" align="center" width="120">
+						<el-button class="show-btn" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">详情
+						</el-button>
+					</el-table-column>
+				</el-table>
+				<div style="margin-top: 20px" class="table-footer">
+					<div class="pages">
+						<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24" class="forth-row">
+				<!-- 编辑对话框 -->
+				<el-dialog title="详情" :visible.sync="editdialogFormVisible" width="520px" top="0vh" class="my-dialog">
+					<div class="right-tip">关于缴费金额的包含费用</div>
+          <hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 20px;">
+          <div id="money_list">
+            <div class="view-balance">学费：{{ e_money }}元</div>
+            <div class="view-balance">住宿费：{{ e_money }}元</div>
+            <div class="view-balance">预收材料费：{{ e_money }}元</div>
+            <div class="view-balance">体检费：{{ e_money }}元</div>
+            <div class="view-balance">保险费：{{ e_money }}元</div>
+            <div class="view-balance">空调租赁费：{{ e_money }}元</div>
+            <div class="view-balance">军训服：{{ e_money }}元</div>
+            <div class="view-balance">生活用品：{{ e_money }}元</div>
+          </div>
+				</el-dialog>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				editdialogFormVisible: false,
+				delDialogVisible: false,
+				form: {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				},
+				formLabelWidth: '120px',
+				formInline: {
+					user: '',
+					options: [{
+						value: '选项1',
+						label: '全部'
+					}, {
+						value: '选项2',
+						label: '黄金糕'
+					}],
+					value: '选项1'
+				},
+				tableData: [{
+					id: '20140309010103',
+					stuName: '全红禅',
+          institute: '跳水学院',
+          major: '跳水研究',
+          class: '跳水一班',
+					money: '21900'
+				}, {
+					id: '20140309010103',
+					stuName: '全红禅',
+					institute: '跳水学院',
+					major: '跳水研究',
+					class: '跳水一班',
+					money: '21900'
+				}, {
+					id: '20140309010103',
+					stuName: '全红禅',
+					institute: '跳水学院',
+					major: '跳水研究',
+					class: '跳水一班',
+					money: '21900'
+				}, {
+					id: '20140309010103',
+					stuName: '全红禅',
+					institute: '跳水学院',
+					major: '跳水研究',
+					class: '跳水一班',
+					money: '21900'
+				}, {
+					id: '20140309010103',
+					stuName: '全红禅',
+					institute: '跳水学院',
+					major: '跳水研究',
+					class: '跳水一班',
+					money: '21900'
+				}, {
+					id: '20140309010103',
+					stuName: '全红禅',
+					institute: '跳水学院',
+					major: '跳水研究',
+					class: '跳水一班',
+					money: '21900'
+				}, {
+					id: '20140309010103',
+					stuName: '全红禅',
+					institute: '跳水学院',
+					major: '跳水研究',
+					class: '跳水一班',
+					money: '21900'
+				}, {
+					id: '20140309010103',
+					stuName: '全红禅',
+					institute: '跳水学院',
+					major: '跳水研究',
+					class: '跳水一班',
+					money: '21900'
+				}],
+				multipleSelection: [],
+        e_money: '5980'
+			}
+		},
+		methods: {
+			onSubmit() {
+				console.log('submit!')
+			},
+			handleOpen(key, keyPath) {
+				console.log(key, keyPath)
+			},
+			handleClose(key, keyPath) {
+				console.log(key, keyPath)
+			},
+			toggleSelection(rows) {
+				if (rows) {
+					rows.forEach(row => {
+						this.$refs.multipleTable.toggleRowSelection(row)
+					})
+				} else {
+					this.$refs.multipleTable.clearSelection()
+				}
+			},
+			handleSelectionChange(val) {
+				this.multipleSelection = val
+			},
+			handleEdit(index, row) {
+				this.editdialogFormVisible = true
+				console.log(index, row)
+			},
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				console.log(index, row)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("payNameList.css");
+</style>

src/components/wrongOrder/wrongOrder.css

@@ -0,0 +1,345 @@
+/* dev-mgr */
+.first-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  font-size: 20px;
+  /* padding: 32px 40px 53px 40px; */
+}
+
+#first-left {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 130px;
+}
+
+#logo {
+  /* margin-top: 40px; */
+  /* margin-bottom: 40px; */
+  width: 30px;
+  height: 30px;
+  background: url(../../../static/images/money1.png) 0 0 no-repeat;
+  background-size: 30px 30px;
+}
+
+.tag {
+  /* width: 95px; */
+  /* height: 22px; */
+  font-size: 22px;
+  font-family: Microsoft YaHei-3970(82674968);
+  font-weight: 400;
+  color: #1A202B;
+  /* line-height: 54px; */
+}
+
+.second-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 80px;
+	padding-top: 20px;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+>>>.demo-form-inline {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 18px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-right: 106px;
+}
+
+>>>.el-form-item__label {
+	margin: 0;
+	padding: 0;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+	width: 240px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+  margin-right: 20px;
+}
+
+.loudonghao>>>.el-input__inner {
+	width: 181px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+}
+
+.el-button {
+	width: 68px;
+	height: 40px;
+	background: #F88A64;
+	border-radius: 4px;
+	font-size: 18px;
+  padding-left: 15px;
+}
+
+>>>.el-table__header {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+}
+
+>>>.el-table__header .cell {
+	color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+	width: 24px;
+	height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+	margin: 3px 0 0 4px;
+	width: 4px;
+	height: 10px;
+}
+
+>>>.el-table__row .cell {
+	height: 35px;
+	line-height: 35px;
+	font-size: 18px;
+	color: #333333;
+}
+
+>>>.el-table__row .cell .el-button {
+	background: none;
+	margin: 0 20px 0 0;
+	width: 50px;
+	height: 35px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.el-icon {
+	width: 38px;
+	height: 38px;
+	line-height: 38px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+	margin: 0 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+>>>.el-form-item__label {
+	font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+	font-size: 18px;
+}
+
+.dialog-footer{
+  display: flex;
+  justify-content: space-around;
+  width: 380px;
+  margin-left: 120px;
+}
+
+.dialog-footer>>>.el-button--default {
+	border: 1px solid #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+  display: block;
+	height: 50px;
+  width: 140px;
+	background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	height: 50px;
+  width: 140px;
+
+}
+
+.my-dialog {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.forth-row .el-form {
+	margin-top: 10px;
+	white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+	width: 130px;
+}
+
+.right-tip {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.dialog-pages {
+	display: flex;
+	justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+	margin: 0 3px;
+	width: 30px;
+	height: 33px;
+	line-height: 33px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.all-money{
+  font-size: 36px;
+}
+.el-button--primary{
+  border-color: #F88A64;
+}
+
+.el-table__row .cell .el-button{
+  font-size: 14px;
+  color: #5488FE;
+  width: 60px;
+  height: 30px;
+  border-radius: 15px;
+  border: 1px solid #5488FE;
+  padding-top: 8px;
+  padding-left: 8px;
+}
+
+.font-color{
+  color:#FF520F;
+}
+
+#center{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  /* border: 1px solid yellow; */
+}
+
+#logo-center{
+  margin-top: 44px;
+  margin-bottom: 39px;
+  width: 107px;
+  height: 107px;
+  background: url(../../../static/images/logo-center.png) 0 0 no-repeat;
+  background-size: 107px 107px;
+  /* border: 1px solid red; */
+}
+
+#item-txt{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  /* border: 1px solid yellow; */
+  font-family: 'MicrosoftYaHei';
+  padding-bottom: 92px;
+}
+
+.item-text{
+  font-size: 22px;
+  color: #333333;
+}
+
+>>>.el-dialog__footer{
+  padding-bottom: 68px;
+}
+
+/* >>>.el-dialog--center .el-dialog__body{
+  padding-bottom: 92px;
+} */
+
+/* dev-mgr */

src/components/wrongOrder/wrongOrder.vue

@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="first-row">
+        <div id="first-left">
+          <div id="logo"></div>
+          <div class="tag">异常订单</div>
+        </div>
+      </el-col>
+    </el-row>
+    <hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
+    <el-row>
+      <el-col :span="24" class="second-row">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="关键字：" class="shuibiaoId">
+            <el-input v-model="formInline.user" placeholder="请输入订单号或者姓名"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">搜索</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="third-row">
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
+          @selection-change="handleSelectionChange" highlight-current-row>
+          <el-table-column label="订单号" width="220" align="center">
+            <template slot-scope="scope">{{ scope.row.order }}</template>
+          </el-table-column>
+          <el-table-column prop="id" label="学号" width="220"></el-table-column>
+          <el-table-column prop="stuName" label="姓名" width="130"></el-table-column>
+          <el-table-column prop="class" label="班级" width="180"></el-table-column>
+          <el-table-column prop="money" label="金额(元)" width="130"></el-table-column>
+          <el-table-column prop="time" label="时间" width="250"></el-table-column>
+          <el-table-column label="状态" width="140" align="center">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.school_state === '支付失败' ? 'danger' : 'success'" disable-transitions>{{scope.row.school_state}}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="140" align="center">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.bank_state === '支付失败' ? 'danger' : 'success'" disable-transitions>{{scope.row.bank_state}}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="100">
+            <el-button id="show-btn" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">
+              {{scope.row.state}}
+            </el-button>
+          </el-table-column>
+        </el-table>
+        <div style="margin-top: 20px" class="table-footer">
+          <div class="pages">
+            <el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="forth-row">
+        <!-- 编辑对话框 -->
+        <el-dialog title="" :visible.sync="editdialogFormVisible" width="640px" height="487px" top="0vh" class="my-dialog">
+          <div id="center">
+            <div id="logo-center"></div>
+          </div>
+          <div id="item-txt">
+            <span class="item-text">是否确定将该订单从异常列表中移除</span>
+          </div>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click="editdialogFormVisible = false">取 消</el-button>
+              <el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
+            </span>
+        </el-dialog>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        editdialogFormVisible: false,
+        delDialogVisible: false,
+        form: {
+          id: 'KB580002652',
+          drom: '18',
+          room: '118'
+        },
+        formLabelWidth: '120px',
+        formInline: {
+          user: '',
+          options: [{
+            value: '选项1',
+            label: '全部'
+          }, {
+            value: '选项2',
+            label: '黄金糕'
+          }],
+          value: '选项1'
+        },
+        tableData: [{
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }, {
+          order: 'KB09010103',
+          id: '20140309010103',
+          stuName: '吴亦凡',
+          class: '跳水二班',
+          money: '14789',
+          time: '2021/08/12 09:25:45',
+          school_state: '支付成功',
+          bank_state: '支付失败',
+          state: '已处理'
+        }],
+        multipleSelection: [],
+        // font_color: [true,false,false,false,false,false,false,false]
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!')
+      },
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath)
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath)
+      },
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row)
+          })
+        } else {
+          this.$refs.multipleTable.clearSelection()
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+      handleEdit(index, row) {
+        this.editdialogFormVisible = true
+        console.log(index, row)
+      },
+      handleDelete(index, row) {
+        this.delDialogVisible = true
+        console.log(index, row)
+      }
+    },
+    created: function() {
+      // for(var i=0 ;i<this.tableData.length ;i++){
+      //   // console.log(this.tableData[i].state)
+      //   if(this.tableData[i].state=='支付失败'){
+      //     this.font_color=true
+      //   }else{
+      //     this.font_color=false
+      //   }
+      // }
+    }
+  }
+</script>
+
+<style scoped>
+  @import url("wrongOrder.css");
+</style>