salarySet.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. <template>
  2. <div class="salarySet">
  3. <!-- <h4>单次课次参考时长:30min</h4> -->
  4. <div class="tableList">
  5. <div class="left">
  6. <el-table :data="teamTable"
  7. :header-cell-style="{background:'#EDEEF0',color:'#444'}">
  8. <el-table-column label="乐团课课酬课时结算">
  9. <template slot-scope="scope">{{ scope.row.courseScheduleType | coursesType }}</template>
  10. </el-table-column>
  11. <el-table-column label="默认课酬-主教">
  12. <template slot-scope="scope">
  13. <el-input type="number"
  14. @mousewheel.native.prevent
  15. v-model.trim="scope.row.mainTeacher30MinSalary"
  16. placeholder="请输入课酬">
  17. <template slot="append"
  18. v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
  19. <template slot="append"
  20. v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
  21. <template slot="append"
  22. v-else>元/30分钟</template>
  23. </el-input>
  24. </template>
  25. </el-table-column>
  26. <el-table-column label="默认课酬-助教">
  27. <template slot-scope="scope">
  28. <el-input type="number"
  29. @mousewheel.native.prevent
  30. v-model.trim="scope.row.assistantTeacher30MinSalary"
  31. placeholder="请输入课酬">
  32. <template slot="append"
  33. v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
  34. <template slot="append"
  35. v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
  36. <template slot="append"
  37. v-else>元/30分钟</template>
  38. </el-input>
  39. </template>
  40. </el-table-column>
  41. <el-table-column label="3.0课酬-主教">
  42. <template slot-scope="scope">
  43. <el-input type="number"
  44. @mousewheel.native.prevent
  45. :disabled="scope.row.courseScheduleType == 'CLASSROOM'"
  46. v-model.trim="scope.row.mainTeacher90MinSalary"
  47. placeholder="请输入课酬">
  48. <template slot="append"
  49. v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
  50. <template slot="append"
  51. v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
  52. <template slot="append"
  53. v-else>元/90分钟</template>
  54. <!-- <template slot="append">元/{{ (scope.row.courseScheduleType == 'HIGH' || scope.row.courseScheduleType == 'CLASSROOM') ? 45 : 90 }}分钟</template> -->
  55. </el-input>
  56. </template>
  57. </el-table-column>
  58. <el-table-column label="3.0课酬-助教">
  59. <template slot-scope="scope">
  60. <el-input type="number"
  61. @mousewheel.native.prevent
  62. :disabled="scope.row.courseScheduleType == 'CLASSROOM'"
  63. v-model.trim="scope.row.assistantTeacher90MinSalary"
  64. placeholder="请输入课酬">
  65. <template slot="append"
  66. v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
  67. <template slot="append"
  68. v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
  69. <template slot="append"
  70. v-else>元/90分钟</template>
  71. <!-- <template slot="append">元/{{ (scope.row.courseScheduleType == 'HIGH' || scope.row.courseScheduleType == 'CLASSROOM') ? 45 : 90 }}分钟</template> -->
  72. </el-input>
  73. </template>
  74. </el-table-column>
  75. </el-table>
  76. <el-table :data="teamSmallTable"
  77. style=" margin-top: 15px;"
  78. :header-cell-style="{background:'#EDEEF0',color:'#444'}">
  79. <el-table-column label="">
  80. <template slot-scope="scope">{{ scope.row.courseScheduleType | coursesType }}</template>
  81. </el-table-column>
  82. <el-table-column label="1V1">
  83. <template slot-scope="scope">
  84. <el-input type="number"
  85. @mousewheel.native.prevent
  86. v-model.trim="scope.row.v1"
  87. placeholder="请输入课酬">
  88. <template slot="append">元/节</template>
  89. </el-input>
  90. </template>
  91. </el-table-column>
  92. <el-table-column label="1V2">
  93. <template slot-scope="scope">
  94. <el-input type="number"
  95. @mousewheel.native.prevent
  96. v-model.trim="scope.row.v2"
  97. placeholder="请输入课酬">
  98. <template slot="append">元/节</template>
  99. </el-input>
  100. </template>
  101. </el-table-column>
  102. <el-table-column label="1V3">
  103. <template slot-scope="scope">
  104. <el-input type="number"
  105. @mousewheel.native.prevent
  106. v-model.trim="scope.row.v3"
  107. placeholder="请输入课酬">
  108. <template slot="append">元/节</template>
  109. </el-input>
  110. </template>
  111. </el-table-column>
  112. <el-table-column label="1V4">
  113. <template slot-scope="scope">
  114. <el-input type="number"
  115. @mousewheel.native.prevent
  116. v-model.trim="scope.row.v4"
  117. placeholder="请输入课酬">
  118. <template slot="append">元/节</template>
  119. </el-input>
  120. </template>
  121. </el-table-column>
  122. <el-table-column label="1V5">
  123. <template slot-scope="scope">
  124. <el-input type="number"
  125. @mousewheel.native.prevent
  126. v-model.trim="scope.row.v5"
  127. placeholder="请输入课酬">
  128. <template slot="append">元/节</template>
  129. </el-input>
  130. </template>
  131. </el-table-column>
  132. </el-table>
  133. <el-table :data="vipTable"
  134. style="width: 70%; margin-top: 15px;"
  135. :header-cell-style="{background:'#EDEEF0',color:'#444'}">
  136. <el-table-column label="VIP课课酬参考值"
  137. prop="vipGroupCategoryName"></el-table-column>
  138. <!-- <el-table-column label="线上课">
  139. <template slot-scope="scope">
  140. <el-input
  141. type="number"
  142. @mousewheel.native.prevent
  143. v-model.trim="scope.row.onlineClassesSalary"
  144. placeholder="请输入内容"
  145. >
  146. <template slot="append">元/45分钟</template>
  147. </el-input>
  148. </template>
  149. </el-table-column> -->
  150. <el-table-column label="">
  151. <template slot-scope="scope">
  152. <div>
  153. <el-input type="number"
  154. @mousewheel.native.prevent
  155. v-model.trim="scope.row.offlineClassesSalary"
  156. placeholder="请输入内容">
  157. <template slot="append" v-if="scope.row.musicTheory"> 元/人</template>
  158. <template slot="append" v-else>节/人</template>
  159. </el-input>
  160. </div>
  161. </template>
  162. </el-table-column>
  163. </el-table>
  164. <el-table :data="accompanyTable"
  165. style="width: 35%; margin-top: 15px;"
  166. :header-cell-style="{background:'#EDEEF0',color:'#444'}">
  167. <el-table-column label="网管课">
  168. <template slot-scope="scope">
  169. <el-input type="number"
  170. style="width:195px"
  171. @mousewheel.native.prevent
  172. v-model.trim="scope.row.mainTeacherSalary">
  173. <template slot="append">元/{{scope.row.minutes}}分钟</template>
  174. </el-input>
  175. </template>
  176. </el-table-column>
  177. </el-table>
  178. <el-form style="margin-top: 20px;">
  179. <el-form-item label="生效日期">
  180. <el-date-picker v-model.trim="startDate"
  181. type="date"
  182. value-format="yyyy-MM-dd"
  183. :picker-options="pickerOptions"
  184. placeholder="选择日期"></el-date-picker>
  185. <div style="display: inline; color: red; padding-left: 10px;">说明:本次调整只对生效日期之后(包含当天)且未结算的课程生效;</div>
  186. </el-form-item>
  187. </el-form>
  188. <div style="padding-top: 10px;"
  189. v-permission="pageType == 'create' ? {child: 'teacherDefaultMusicGroupSalary/batchUpset', parent: 'teacherAdd/batchUpset'} : {child: 'teacherDefaultMusicGroupSalary/batchUpset', parent: 'teacherUpdate/batchUpset'}">
  190. <el-button @click="onSave()"
  191. type="primary">保存</el-button>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. </template>
  197. <script>
  198. import {
  199. vipGroupSalaryList,
  200. vipGroupSalarySet,
  201. teacherSalaryList,
  202. teacherSalaryBatchUpset,
  203. teacherDefaultPracticeGroupSalary,
  204. PracticeGroupSalaryUpdate
  205. } from "@/api/teacherManager";
  206. import { sysConfigList } from "@/api/generalSettings";
  207. import { findTeacherDefaultSalary } from "@/api/vipSeting";
  208. let nowTime = new Date();
  209. let checkTime =
  210. nowTime.getFullYear() +
  211. "-" +
  212. (nowTime.getMonth() + 1) +
  213. "-" +
  214. nowTime.getDate();
  215. export default {
  216. props: ["teacherId"],
  217. name: "salarySet",
  218. data () {
  219. return {
  220. pageType: this.$route.query.type, // 页面类型
  221. // teacherId: this.teacherId ? this.teacherId : this.$route.query.teacherId,
  222. teamTable: [
  223. {
  224. assistantTeacher30MinSalary: 0,
  225. assistantTeacher90MinSalary: 0,
  226. courseScheduleType: "SINGLE",
  227. mainTeacher30MinSalary: 0,
  228. mainTeacher90MinSalary: 0,
  229. userId: this.teacherId
  230. },
  231. {
  232. assistantTeacher30MinSalary: 0,
  233. assistantTeacher90MinSalary: 0,
  234. courseScheduleType: "MIX",
  235. mainTeacher30MinSalary: 0,
  236. mainTeacher90MinSalary: 0,
  237. userId: this.teacherId
  238. },
  239. {
  240. assistantTeacher30MinSalary: 0,
  241. assistantTeacher90MinSalary: 0,
  242. courseScheduleType: "COMPREHENSIVE",
  243. mainTeacher30MinSalary: 0,
  244. mainTeacher90MinSalary: 0,
  245. userId: this.teacherId
  246. },
  247. {
  248. assistantTeacher30MinSalary: 0,
  249. assistantTeacher90MinSalary: 0,
  250. courseScheduleType: "TRAINING_SINGLE",
  251. mainTeacher30MinSalary: 0,
  252. mainTeacher90MinSalary: 0,
  253. userId: this.teacherId
  254. },
  255. {
  256. assistantTeacher30MinSalary: 0,
  257. assistantTeacher90MinSalary: 0,
  258. courseScheduleType: "TRAINING_MIX",
  259. mainTeacher30MinSalary: 0,
  260. mainTeacher90MinSalary: 0,
  261. userId: this.teacherId
  262. },
  263. {
  264. assistantTeacher30MinSalary: 0,
  265. assistantTeacher90MinSalary: 0,
  266. courseScheduleType: "HIGH",
  267. mainTeacher30MinSalary: 0,
  268. mainTeacher90MinSalary: 0,
  269. userId: this.teacherId
  270. },
  271. {
  272. assistantTeacher30MinSalary: 0,
  273. assistantTeacher90MinSalary: 0,
  274. courseScheduleType: "CLASSROOM",
  275. mainTeacher30MinSalary: 0,
  276. mainTeacher90MinSalary: 0,
  277. userId: this.teacherId
  278. }
  279. ],
  280. // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
  281. // userId: this.teacherId
  282. teamSmallTable: [
  283. {
  284. courseScheduleType: "HIGH_ONLINE",
  285. // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
  286. v1: 0,
  287. v2: 0,
  288. v3: 0,
  289. v4: 0,
  290. v5: 0,
  291. assistantTeacher30MinSalary: 0,
  292. assistantTeacher90MinSalary: 0,
  293. mainTeacher30MinSalary: 0,
  294. mainTeacher90MinSalary: 0,
  295. userId: this.teacherId
  296. },
  297. {
  298. courseScheduleType: "MUSIC_NETWORK",
  299. // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
  300. v1: 0,
  301. v2: 0,
  302. v3: 0,
  303. v4: 0,
  304. v5: 0,
  305. assistantTeacher30MinSalary: 0,
  306. assistantTeacher90MinSalary: 0,
  307. mainTeacher30MinSalary: 0,
  308. mainTeacher90MinSalary: 0,
  309. userId: this.teacherId
  310. }
  311. ],
  312. vipTable: [],
  313. musicGroupTable: [],
  314. ruleList: [],
  315. vipList: [],
  316. startDate: null,
  317. accompanyTable: [
  318. {
  319. assistantTeacherSalary: 30,
  320. minutes: 25,
  321. userId: this.teacherId,
  322. mainTeacherSalary: 0
  323. }
  324. ],
  325. pickerOptions: {
  326. disabledDate (time) {
  327. return time.getTime() > Date.now();
  328. },
  329. firstDayOfWeek: 1
  330. }
  331. };
  332. },
  333. created () { },
  334. mounted () {
  335. this.pageType = this.$route.query.type;
  336. this.__init();
  337. },
  338. activated () {
  339. this.pageType = this.$route.query.type;
  340. this.__init();
  341. },
  342. methods: {
  343. __init () {
  344. if (this.$route.query.search) {
  345. this.Fsearch = this.$route.query.search;
  346. }
  347. if (this.$route.query.rules) {
  348. this.Frules = this.$route.query.rules;
  349. }
  350. // 获取课程形态 设置vip课酬
  351. findTeacherDefaultSalary({ userId: this.teacherId }).then(res => {
  352. if (res.code == 200 && res.data.length > 0) {
  353. let vipData = [];
  354. res.data.forEach(item => {
  355. vipData.push({
  356. offlineClassesSalary: null,
  357. onlineClassesSalary: null,
  358. vipGroupCategoryId: item.id,
  359. vipGroupCategoryName: item.name,
  360. userId: this.teacherId,
  361. musicTheory:item.musicTheory
  362. });
  363. });
  364. // VIP课列表
  365. vipGroupSalaryList({
  366. rows: 9999,
  367. page: 1,
  368. search: this.teacherId
  369. }).then(res => {
  370. if (res.code == 200) {
  371. let rows = res.data.rows;
  372. this.vipListCompare(vipData, rows);
  373. }
  374. });
  375. }
  376. });
  377. // 乐团
  378. teacherSalaryList({
  379. rows: 9999,
  380. page: 1,
  381. teacherId: this.teacherId
  382. // settlementType: 'FIXED_SALARY'
  383. }).then(res => {
  384. if (res.code == 200) {
  385. // this.teamTable = res.data.rows
  386. let rows = res.data.rows;
  387. this.teacherSalaryMoney(rows);
  388. }
  389. });
  390. // 网管课
  391. teacherDefaultPracticeGroupSalary({ teacherId: this.teacherId }).then(
  392. res => {
  393. if (res.code == 200 && res.data.length > 0) {
  394. this.accompanyTable = res.data;
  395. }
  396. }
  397. );
  398. },
  399. vipListCompare (vipData, rows) {
  400. // vip 做对比
  401. if (!rows) {
  402. // 判断是否有数据
  403. this.vipTable = vipData;
  404. return;
  405. }
  406. let result = [];
  407. vipData.forEach(item => {
  408. rows.forEach(c => {
  409. if (item.vipGroupCategoryId == c.vipGroupCategoryId) {
  410. item.checked = true;
  411. result.push({
  412. vipGroupCategoryId: c.vipGroupCategoryId,
  413. offlineClassesSalary: c.offlineClassesSalary,
  414. onlineClassesSalary: c.onlineClassesSalary,
  415. vipGroupCategoryName: c.vipGroupCategoryName,
  416. userId: c.userId,
  417. musicTheory:c.musicTheory
  418. });
  419. }
  420. });
  421. });
  422. if (result.length > 0) {
  423. vipData.forEach(item => {
  424. if (!item.checked) {
  425. result.push(item);
  426. }
  427. });
  428. } else {
  429. result = vipData;
  430. }
  431. this.vipTable = result;
  432. },
  433. teacherSalaryMoney (rows) {
  434. // 判断是否有数据
  435. if (!rows || rows.length <= 0) return;
  436. let teamTable = this.teamTable;
  437. let result = [];
  438. teamTable.forEach(item => {
  439. rows.forEach(c => {
  440. if (item.courseScheduleType == c.courseScheduleType) {
  441. item.checked = true;
  442. result.push({
  443. mainTeacher30MinSalary: c.mainTeacher30MinSalary,
  444. mainTeacher90MinSalary: c.mainTeacher90MinSalary,
  445. assistantTeacher30MinSalary: c.assistantTeacher30MinSalary,
  446. assistantTeacher90MinSalary: c.assistantTeacher90MinSalary,
  447. courseScheduleType: c.courseScheduleType,
  448. userId: this.teacherId
  449. });
  450. }
  451. });
  452. });
  453. if (result.length > 0) {
  454. teamTable.forEach(item => {
  455. if (!item.checked) {
  456. result.push(item);
  457. }
  458. });
  459. } else {
  460. result = teamTable;
  461. }
  462. this.teamTable = result;
  463. let smallResult = []
  464. let teamSmallTable = this.teamSmallTable
  465. teamSmallTable.forEach(item => {
  466. rows.forEach(c => {
  467. if (item.courseScheduleType == c.courseScheduleType) {
  468. item.checked = true;
  469. let tempJson = c.salaryRuleJson ? JSON.parse(c.salaryRuleJson) : { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }
  470. // console.log(tempJson)
  471. smallResult.push({
  472. mainTeacher30MinSalary: c.mainTeacher30MinSalary,
  473. mainTeacher90MinSalary: c.mainTeacher90MinSalary,
  474. assistantTeacher30MinSalary: c.assistantTeacher30MinSalary,
  475. assistantTeacher90MinSalary: c.assistantTeacher90MinSalary,
  476. salaryRuleJson: tempJson,
  477. v1: tempJson[1] ? tempJson[1] : 0,
  478. v2: tempJson[2] ? tempJson[2] : 0,
  479. v3: tempJson[3] ? tempJson[3] : 0,
  480. v4: tempJson[4] ? tempJson[4] : 0,
  481. v5: tempJson[5] ? tempJson[5] : 0,
  482. courseScheduleType: c.courseScheduleType,
  483. userId: this.teacherId
  484. });
  485. }
  486. });
  487. })
  488. if (smallResult.length > 0) {
  489. teamSmallTable.forEach(item => {
  490. if (!item.checked) {
  491. smallResult.push(item);
  492. }
  493. });
  494. } else {
  495. smallResult = teamSmallTable;
  496. }
  497. this.teamSmallTable = smallResult;
  498. },
  499. onSave () {
  500. this.$confirm("您确定更改老师课酬", "提示", {
  501. confirmButtonText: "确定",
  502. cancelButtonText: "取消",
  503. type: "warning"
  504. })
  505. .then(() => {
  506. let teamTable = this.teamTable;
  507. let checkStatus = true;
  508. teamTable.forEach(item => {
  509. if (
  510. item.assistantTeacher30MinSalary < 0 ||
  511. item.assistantTeacher90MinSalary < 0 ||
  512. item.mainTeacher30MinSalary < 0 ||
  513. item.mainTeacher90MinSalary < 0
  514. ) {
  515. this.$message.error("输入课酬不能为负数");
  516. checkStatus = false;
  517. return;
  518. }
  519. });
  520. let temps = []
  521. this.teamSmallTable.forEach(item => {
  522. if (item.v1 < 0 || item.v2 < 0 || item.v3 < 0 || item.v4 < 0 || item.v5 < 0) {
  523. this.$message.error("输入课酬不能为负数");
  524. checkStatus = false;
  525. return;
  526. }
  527. temps.push({
  528. courseScheduleType: item.courseScheduleType,
  529. salaryRuleJson: JSON.stringify({ 1: Number(item.v1), 2: Number(item.v2), 3: Number(item.v3), 4: Number(item.v4), 5: Number(item.v5) }),
  530. assistantTeacher30MinSalary: 0,
  531. assistantTeacher90MinSalary: 0,
  532. mainTeacher30MinSalary: 0,
  533. mainTeacher90MinSalary: 0,
  534. userId: item.userId
  535. })
  536. })
  537. this.vipTable.forEach(item => {
  538. if (item.offlineClassesSalary < 0 && item.onlineClassesSalary < 0) {
  539. this.$message.error("输入课酬不能为负数");
  540. checkStatus = false;
  541. return;
  542. }
  543. });
  544. this.accompanyTable.forEach(item => {
  545. if (item.mainTeacherSalary < 0) {
  546. this.$message.error("输入课酬不能为负数");
  547. checkStatus = false;
  548. return;
  549. }
  550. if (!item.mainTeacherSalary.toString()) {
  551. this.$message.error("输入网管课课酬");
  552. checkStatus = false;
  553. return;
  554. }
  555. });
  556. // 判断输入的值是否正确
  557. if (!this.startDate) {
  558. this.$message.error("请填写生效日期");
  559. return;
  560. }
  561. if (!checkStatus) {
  562. return
  563. }
  564. let params = teamTable.concat(temps)
  565. teacherSalaryBatchUpset({
  566. teacherDefaultMusicGroupSalaries: params,
  567. startDate: this.startDate
  568. }).then(res => {
  569. if (res.code == 200) {
  570. // 判断输入的值是否正确
  571. vipGroupSalarySet({
  572. teacherDefaultVipGroupSalaries: this.vipTable,
  573. startDate: this.startDate
  574. }).then(res => {
  575. if (res.code == 200) {
  576. PracticeGroupSalaryUpdate({
  577. startDate: this.startDate,
  578. teacherDefaultPracticeGroupSalaries: this.accompanyTable
  579. }).then(res => {
  580. if (res.code == 200) {
  581. this.$message.success("保存成功");
  582. this.$router.push({
  583. path: "/business/teacherList",
  584. query: { rules: this.Frules, search: this.Fsearch }
  585. });
  586. }
  587. });
  588. // if(this.$route.query.type == 'create') {
  589. // }
  590. }
  591. });
  592. }
  593. });
  594. })
  595. .catch(() => { });
  596. }
  597. }
  598. };
  599. </script>
  600. <style lang="scss" scoped>
  601. .salarySet {
  602. h3 {
  603. margin-top: 10px;
  604. margin-bottom: 10px;
  605. font-size: 14px;
  606. color: #444;
  607. font-weight: normal;
  608. }
  609. .tableList {
  610. .left,
  611. .right {
  612. float: left;
  613. }
  614. .left {
  615. width: 70%;
  616. margin-right: 2%;
  617. }
  618. .right {
  619. width: 56%;
  620. margin-left: 2%;
  621. }
  622. }
  623. }
  624. /deep/.el-table__body {
  625. tr {
  626. td:nth-child(3) {
  627. border-right: 1px solid #ebeef5;
  628. }
  629. }
  630. }
  631. /deep/.el-input-group__append {
  632. background-color: #f5f7fa;
  633. color: #909399;
  634. vertical-align: middle;
  635. display: table-cell;
  636. position: relative;
  637. border: 1px solid #dcdfe6;
  638. border-left: 0;
  639. }
  640. </style>