课程、赛事等制作

UI_2022-02-10
yujialong 3 years ago
parent 3d2281009f
commit 8967fb311f
  1. BIN
      src/assets/img/05学生-练习记录_03.png
  2. BIN
      src/assets/img/05学生-练习记录_05.png
  3. BIN
      src/assets/img/17查看成绩1.png
  4. BIN
      src/assets/img/17查看成绩2.png
  5. BIN
      src/assets/img/17查看成绩3.png
  6. BIN
      src/assets/img/17查看成绩4.png
  7. BIN
      src/assets/img/17查看成绩5.png
  8. BIN
      src/assets/img/17查看成绩6.png
  9. BIN
      src/assets/img/17查看成绩7.png
  10. BIN
      src/assets/img/back.png
  11. BIN
      src/assets/img/bg_1.png
  12. BIN
      src/assets/img/bg_2.png
  13. BIN
      src/assets/img/course-bg.png
  14. BIN
      src/assets/img/get.png
  15. BIN
      src/assets/img/icon-weigouxuan.png
  16. BIN
      src/assets/img/icon-xiangyou.png
  17. BIN
      src/assets/img/icon-yigouxuan.png
  18. BIN
      src/assets/img/icon_1.png
  19. BIN
      src/assets/img/icon_qq.png
  20. BIN
      src/assets/img/icon_wechat.png
  21. BIN
      src/assets/img/img.jpg
  22. BIN
      src/assets/img/info-banner.png
  23. BIN
      src/assets/img/info-bg.png
  24. BIN
      src/assets/img/info-bg1.png
  25. BIN
      src/assets/img/info-bg2.png
  26. BIN
      src/assets/img/info1.png
  27. BIN
      src/assets/img/info2.png
  28. BIN
      src/assets/img/info3.png
  29. BIN
      src/assets/img/match-bg.png
  30. BIN
      src/assets/img/match-bg1.png
  31. BIN
      src/assets/img/match-bg2.png
  32. BIN
      src/assets/img/person/bg.png
  33. BIN
      src/assets/img/person/manag.png
  34. BIN
      src/assets/img/person/user.png
  35. BIN
      src/assets/img/record1.png
  36. BIN
      src/assets/img/record2.png
  37. BIN
      src/assets/img/record3.png
  38. BIN
      src/assets/img/record4.png
  39. BIN
      src/assets/img/record5.png
  40. BIN
      src/assets/img/record6.png
  41. BIN
      src/assets/img/remove-gray.png
  42. BIN
      src/assets/img/search-gray.png
  43. BIN
      src/assets/img/search.png
  44. BIN
      src/assets/img/station-bg.png
  45. BIN
      src/assets/img/station1.png
  46. BIN
      src/assets/img/station10.png
  47. BIN
      src/assets/img/station11.png
  48. BIN
      src/assets/img/station12.png
  49. BIN
      src/assets/img/station2.png
  50. BIN
      src/assets/img/station3.png
  51. BIN
      src/assets/img/station4.png
  52. BIN
      src/assets/img/station5.png
  53. BIN
      src/assets/img/station6.png
  54. BIN
      src/assets/img/station7.png
  55. BIN
      src/assets/img/station8.png
  56. BIN
      src/assets/img/station9.png
  57. BIN
      src/assets/img/student1.png
  58. BIN
      src/assets/img/student2.png
  59. BIN
      src/assets/img/student3.png
  60. BIN
      src/assets/img/student4.png
  61. BIN
      src/assets/img/trash.png
  62. 35
      src/layouts/header/index.vue
  63. 2
      src/pages/account/login/index.vue
  64. 2
      src/pages/cityPartner/list/index.vue
  65. 280
      src/pages/course/list/index.vue
  66. 2
      src/pages/devPlatform/list/index.vue
  67. 2
      src/pages/index/list/index.vue
  68. 247
      src/pages/info/list/index.vue
  69. 517
      src/pages/match/list/index.vue
  70. 2
      src/pages/record/list/ass.vue
  71. 171
      src/pages/record/list/index.vue
  72. 6
      src/pages/record/list/practice.vue
  73. 1476
      src/pages/setting/person/index.vue
  74. 931
      src/pages/setting/person/info.vue
  75. 68
      src/pages/station/list/index.vue
  76. 2
      src/router/permission.js
  77. 127
      src/styles/common.scss

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 848 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 918 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 499 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 683 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 325 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 403 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 422 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 323 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 397 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 521 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 640 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 879 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 435 B

@ -2,7 +2,7 @@
<div class="header">
<a class="logo" @click="toIndex">
<template v-if="token">
<img class="logo" :src="logoUrl" />
<img :src="logoUrl" width="50" height="50" />
<span class="title">{{title}}</span>
</template>
<img v-else src="@/assets/img/logo.png" alt="">
@ -12,10 +12,10 @@
<div class="user-wrap">
<template v-if="token">
<div class="user" @click="toPersonal">
<el-avatar :size="40" :src="avatar"></el-avatar>
<span class="user-avator">{{ userName }}</span>
<el-avatar :size="35" :src="avatar"></el-avatar>
<span class="username">{{ userName }}</span>
</div>
<el-divider class="m-l-20" direction="vertical"></el-divider>
<el-divider direction="vertical"></el-divider>
<a class="logout" @click="logout">退出</a>
</template>
<router-link v-else class="login" to="/login" target="_blank">
@ -46,7 +46,7 @@ export default {
])
},
mounted() {
if (token) {
if (this.token) {
this.getSystemDetail();
this.getUserInfo();
}
@ -107,6 +107,9 @@ $height: 64px;
color: #568DF2;
line-height: $height;
cursor: pointer;
img {
margin-right: 10px;
}
}
.title {
font-size: 18px;
@ -115,33 +118,27 @@ $height: 64px;
.user-wrap {
display: inline-flex;
align-items: center;
.user {
display: inline-flex;
align-items: center;
cursor: pointer;
}
}
.user {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.el-divider--vertical {
width: 2px;
height: 15px;
}
.el-divider {
margin-left: 15px;
background-color: #D8D8D8;
}
.user-avator {
.username {
margin-left: 10px;
font-size: 12px;
}
.user-avator img {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.logout {
margin-left: 5px;
font-size: 14px;
color: #666;
cursor: pointer;
}
.login{
display: inline-flex;

@ -145,7 +145,7 @@ export default {
if (valid) {
this.form.distinguish = Number(this.activeName);
this.login(this.form).then(() => {
let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : "/index";
let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : "/station";
this.$router.replace(redirect);
}).catch(res => {
if (res && res.status == 30001) {

@ -1,5 +1,5 @@
<template>
<div class="wrap">
<div class="wrap index">
<div class="banner">
<h6>城市合伙人招募中</h6>
<p class="text">携手共创教育信息化新未来合伙共享产业互联领域新红利</p>

@ -1,26 +1,24 @@
<template>
<div class="box">
<div class="wrap index">
<div class="search">
<input type="text" placeholder="请输入课程名称" v-model="keyword" />
<button>搜索</button>
<h6>精品课程精彩讲解</h6>
<div class="input">
<img src="@/assets/img/search.png" alt="">
<input type="text" placeholder="请输入课程名称" v-model="keyword">
</div>
</div>
<div class="main">
<div class="filter">
<!-- 课程筛选 -->
<div class="filter">
<div class="wrap-inner">
<dl>
<dt>课程分类</dt>
<dd>
<el-select v-model="classificationId" clearable placeholder="请选择课程分类" size="small"
@change="getData">
<el-option label="不限" value=""></el-option>
<el-option v-for="(item,index) in classificationList" :key="index" :label="item.name"
:value="item.id"></el-option>
</el-select>
</dd>
<dd v-for="(item, index) in classificationList" :key="index" :class="{active: classificationId == item.id}" @click="changeType(item.id)">{{ item.name }}</dd>
</dl>
</div>
<div class="courses">
</div>
<!-- 课程列表 -->
<div class="courses">
<div class="wrap-inner">
<template v-if="courseData.length">
<ul>
<li v-for="(item, index) in courseData" :key="index" @click="toDetail(item.id)">
@ -30,8 +28,7 @@
</li>
</ul>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals"
@current-change="handleCurrentChange" :current-page="pageNo">
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
</el-pagination>
</div>
</template>
@ -51,7 +48,6 @@
<script>
import { Loading } from "element-ui";
import bus from "@/libs/bus";
export default {
name: "course",
data() {
@ -59,7 +55,12 @@ export default {
userId: this.$store.state.userId,
schoolId: this.$store.state.schoolId,
classificationId: "",
classificationList: [],
classificationList: [
{
id: '',
name: '不限'
}
],
courseData: [],
keyword: "",
totals: 0,
@ -108,9 +109,8 @@ export default {
},
getClassification() {
this.$get(this.api.queryGlClassification).then(res => {
this.classificationList = res.classificationList;
}).catch(res => {
});
this.classificationList = [...this.classificationList, ...res.classificationList]
}).catch(res => {})
},
changeType(type) {
this.classificationId = type;
@ -128,148 +128,118 @@ export default {
</script>
<style lang="scss" scoped>
.box {
padding: 20px;
background-color: #fff;
.search {
position: relative;
width: 30%;
margin: 50px auto;
border-radius: 30px;
border: 1px solid #9076FF;
border-right: 0;
overflow: hidden;
input {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 20px;
font-size: 14px;
color: #333;
border: 0;
outline: none !important;
box-sizing: border-box;
}
button {
position: absolute;
top: 0;
right: 0;
padding: 0 20px;
line-height: 46px;
color: #fff;
background-color: #9076FF;
border: 0;
outline: none !important;
}
.search {
position: relative;
padding: 121px 0 167px;
text-align: center;
background: url(../../../assets/img/course-bg.png) 0 0/100% 100% no-repeat;
h6 {
margin-bottom: 25px;
font-size: 32px;
color: #fff;
}
.main {
width: 70%;
min-width: 920px;
padding: 40px;
.input {
position: relative;
width: 700px;
margin: 0 auto;
border-radius: 16px;
background-color: #fdfdfd;
box-sizing: border-box;
.filter {
width: 100%;
margin-bottom: 10px;
dl {
//display: flex;
line-height: 30px;
dt {
color: rgba(0, 0, 0, .85);
font-size: 14px;
}
dd {
display: inline-flex;
align-items: center;
span {
padding: 2px 10px;
margin: 0 10px;
color: rgba(0, 0, 0, .65);
font-size: 14px;
cursor: pointer;
&:hover {
color: #CC221C;
}
&.classification {
border-radius: 4px;
color: #fff;
background-color: #CC221C;
}
}
}
img {
position: absolute;
top: 19px;
left: 14px;
}
input {
width: 100%;
height: 62px;
line-height: 62px;
padding: 0 50px;
font-size: 18px;
color: #333;
border: 0;
outline: none;
border-radius: 4px;
}
}
.wrap {
.filter {
width: 100%;
margin-bottom: 10px;
background-color: #fff;
dl {
display: flex;
line-height: 70px;
dt {
color: #333;
font-size: 16px;
font-weight: 600;
}
dd {
margin: 0 10px;
color: #333;
font-size: 16px;
cursor: pointer;
&.active {
color: $main-color;
}
}
}
}
.courses {
ul {
display: flex;
flex-wrap: wrap;
}
li {
width: 24%;
min-height: 250px;
overflow: hidden;
padding: 18px;
margin: 10px .5%;
cursor: pointer;
border-radius: 8px;
background-color: #fff;
transition: all 0.3s;
img {
width: 100%;
height: 165px;
}
.courses {
ul {
display: flex;
flex-wrap: wrap;
li {
width: 24%;
min-height: 250px;
overflow: hidden;
padding: 10px;
margin: 10px .5%;
box-sizing: border-box;
cursor: pointer;
border-radius: 8px;
background-color: #fff;
transition: all 0.3s;
img {
width: 100%;
height: 165px;
}
.title {
margin: 10px 0 5px;
color: #333;
font-size: 16px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc span {
color: #f00;
font-size: 14px;
background-color: #f00;
}
.desc {
color: #999;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
.title {
margin: 10px 0 5px;
color: #0B1D30;
font-size: 16px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.ie {
height: 80px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.desc span {
color: #f00;
font-size: 14px;
background-color: #f00;
}
&:hover {
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
}
.desc {
color: #757F92;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
&.ie {
height: 80px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&:hover {
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
}
}
}
}

@ -1,5 +1,5 @@
<template>
<div class="wrap">
<div class="wrap index">
<div class="banner">
<h6>教育数字化产品开发者平台</h6>
<p class="text">与3000所高校共建数字化教育产业未来</p>

@ -1,5 +1,5 @@
<template>
<div class="wrap">
<div class="wrap index">
<div class="banner">
<el-carousel height="420px" :autoplay="false">
<el-carousel-item>

@ -1,69 +1,70 @@
<template>
<div>
<div class="banner-con"></div>
<div class="wrap index">
<div class="banner"></div>
<div class="main">
<div class="nav">
<div class="sub-title">最新资讯</div>
<el-menu
v-if="menuList.length"
unique-opened
:default-active="defaultIndex"
@select="initData">
<template v-for="item in menuList">
<template v-if="item.secondColumn.length">
<el-submenu :index="item.id" :key="item.id">
<template slot="title">
<div class="center-wrap">
<div class="nav">
<el-menu
v-if="menuList.length"
unique-opened
:default-active="defaultIndex"
@select="initData">
<template v-for="item in menuList">
<template v-if="item.secondColumn.length">
<el-submenu :index="item.id" :key="item.id">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{ item.name }}</span>
</template>
<template v-for="subItem in item.secondColumn">
<el-menu-item
:index="subItem.id"
:key="subItem.id"
>{{ subItem.name }}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.id" :key="item.id">
<i :class="item.icon"></i>
<span slot="title">{{ item.name }}</span>
</template>
<template v-for="subItem in item.secondColumn">
<el-menu-item
:index="subItem.id"
:key="subItem.id"
>{{ subItem.name }}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.id" :key="item.id">
<i :class="item.icon"></i>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</el-menu-item>
</template>
</template>
</template>
</el-menu>
</div>
<div class="list-wrap">
<div class="list">
<template v-if="listData.length">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="toArticle(item.id)">
<img :src="item.coverUrl" alt="">
<div class="text">
<div class="title">{{item.title}}</div>
<div class="desc" :class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}" v-html="item.content"></div>
<div class="metas">
<span>作者{{item.author}}</span>
<span>{{item.date.replace(' 00:00:00','')}}</span>
</el-menu>
</div>
<div class="list-wrap">
<div class="list">
<template v-if="listData.length">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="toArticle(item.id)">
<img :src="item.coverUrl" alt="">
<div class="text">
<div class="title">{{item.title}}</div>
<div class="metas">
<span>作者{{item.author}}</span>
<i class="spe">|</i>
<span>{{item.date.replace(' 00:00:00','')}}</span>
</div>
<div class="desc" :class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}" v-html="item.content"></div>
<a class="detail">查看详情 ></a>
</div>
</li>
</ul>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
</el-pagination>
</div>
</template>
<template v-else>
<div class="empty">
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无资讯</p>
</div>
</li>
</ul>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
</el-pagination>
</div>
</template>
<template v-else>
<div class="empty">
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无资讯</p>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</div>
@ -118,7 +119,6 @@ export default {
this.$get(this.api.queryAllColumns,data).then(res => {
this.menuList = res.columnTree
// ,
if(this.historyId){
this.defaultIndex = this.historyId
this.getContent(this.historyId)
@ -189,82 +189,97 @@ export default {
</script>
<style lang="scss" scoped>
.banner-con{
width: 100%;
height: 200px;
background-image: url('../../../assets/img/match-banner.jpg');
background-size: 100vw 200px;
background-repeat: no-repeat;
.wrap {
.banner {
height: 420px;
padding: 140px 0 0 180px;
background: url(../../../assets/img/info-bg.png) 0 0/100% 100% no-repeat;
}
}
.main{
display: flex;
justify-content: center;
align-items:flex-start;
background: url(../../../assets/img/info-bg1.png) (0px 179px)/auto auto no-repeat,
url(../../../assets/img/info-bg2.png) (bottom right)/auto auto no-repeat;
.center-wrap {
display: flex;
justify-content: center;
align-items:flex-start;
}
.nav{
width: 220px;
border-radius: 8px;
width: 156px;
overflow: hidden;
margin-top: -44px;
.sub-title{
line-height: 88px;
color: #fff;
font-size: 24px;
text-align: center;
background: #9076FF;
}
/deep/ .el-menu {
text-align: right;
border-right: 0;
.el-submenu__title{
font-size: 18px;
.el-submenu__icon-arrow{
font-size: 18px;
.el-menu-item {
padding-right: 24px;
font-size: 16px;
color: #666;
border-bottom: 2px solid #f3f6fa;
border-right: 2px solid transparent;
&:before {
content: '';
display: inline-block;
width: 3px;
height: 3px;
margin-right: 10px;
vertical-align: middle;
border-radius: 50%;
background-color: #666;
}
&.is-active {
color: $main-color;
border-right-color: $main-color;
&:before {
background-color: $main-color;
}
}
}
}
}
.list-wrap{
width: 50%;
margin: 40px 0 0 40px;
flex: 1;
margin-left: 24px;
.list{
padding: 32px;
background-color: #fff;
border-radius: 8px;
li{
display: flex;
padding-bottom: 24px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
img{
width: 200px;
height: 120px;
width: 260px;
height: 195px;
border: 0;
}
.text{
width: calc(100% - 340px);
display: inline-flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
padding: 0 24px;
position: relative;
width: calc(100% - 260px);
padding: 20px 24px;
.title{
font-size: 20px;
color: rgba(0,0,0,.85);
font-size: 22px;
color: #0B1D30;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.metas{
display: inline-flex;
align-items: center;
width: 100%;
margin: 10px 0;
font-size: 12px;
color: rgba(0,0,0,.45);
.spe {
margin: 0 10px;
}
}
.desc{
font-size: 14px;
color: rgba(0,0,0,.65);
color: #333;
line-height: 24px;
display: -webkit-box;
display:-moz-box;
-webkit-box-orient: vertical;
@ -282,24 +297,12 @@ export default {
height: 76px;
}
}
.metas{
display: inline-flex;
align-items: center;
width: 100%;
font-size: 12px;
color: rgba(0,0,0,.45);
span:first-child{
margin-right: 16px;
}
}
}
&:hover{
.text{
.title{
color: #9076FF;
}
.detail {
position: absolute;
bottom: 24px;
font-size: 14px;
color: $main-color;
}
border-bottom-color: #9076FF;
}
}
}

@ -1,88 +1,88 @@
<template>
<div class="box">
<div class="banner-con"></div>
<div class="wrap index">
<div class="search">
<input type="text" placeholder="请输入竞赛名称" v-model="keyword" />
<button>搜索</button>
<h6>赛事竞技精彩纷呈</h6>
<div class="input">
<img src="@/assets/img/search.png" alt="">
<input type="text" placeholder="请输入关键词" v-model="keyword">
</div>
</div>
<div class="main">
<div class="nav">
<div class="sub-title">赛事报名</div>
<div class="sidebar">
<div class="item" :class="{ active: way === item.id }" v-for="(item, index) in typeList"
:key="index" @click="changeType(item.id)">{{ item.name }}
</div>
</div>
</div>
<div class="list-wrap">
<div class="list">
<template v-if="listData.length">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="toDetail(item)">
<div class="left">
<div class="cover">
<img :src="item.coverUrl" alt="">
</div>
<div class="info">
<div class="title">{{ item.name }}</div>
<div class="metas">
<div :class="{'flex-top': item.sponsor.split(',').length > 1}">
<span class="label">主办方</span>
<template v-if="item.sponsor.split(',').length > 1">
<div>
<span v-for="(sponsor,index) in item.sponsor.split(',')"
:key="index" class="val a-line">{{ sponsor }}</span>
</div>
</template>
<span v-else class="val">{{ item.sponsor }}</span>
</div>
<div :class="{'flex-top': item.undertaker.split(',').length > 1}">
<span class="label">承办方</span>
<template v-if="item.undertaker.split(',').length > 1">
<div>
<span v-for="(undertaker,index) in item.undertaker.split(',')"
:key="index" class="val a-line">{{ undertaker }}</span>
</div>
</template>
<span v-else class="val">{{ item.undertaker }}</span>
<div class="center-wrap">
<ul class="nav">
<li :class="{ active: way === item.id }" v-for="(item, index) in typeList" :key="index" @click="changeType(item.id)">{{ item.name }}
</li>
</ul>
<div class="list-wrap">
<div class="list">
<template v-if="listData.length">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="toDetail(item)">
<div class="left">
<div class="cover">
<img :src="item.coverUrl" alt="">
</div>
<div class="info">
<div class="title">{{ item.name }}</div>
<div class="metas">
<div :class="{'flex-top': item.sponsor.split(',').length > 1}">
<span class="label">主办方</span>
<template v-if="item.sponsor.split(',').length > 1">
<div>
<span v-for="(sponsor,index) in item.sponsor.split(',')"
:key="index" class="val a-line">{{ sponsor }}</span>
</div>
</template>
<span v-else class="val">{{ item.sponsor }}</span>
</div>
<div :class="{'flex-top': item.undertaker.split(',').length > 1}">
<span class="label">承办方</span>
<template v-if="item.undertaker.split(',').length > 1">
<div>
<span v-for="(undertaker,index) in item.undertaker.split(',')"
:key="index" class="val a-line">{{ undertaker }}</span>
</div>
</template>
<span v-else class="val">{{ item.undertaker }}</span>
</div>
<p>
<span class="label">报名时间</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span>
</p>
<p>
<span class="label">比赛时间</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span>
</p>
</div>
<p>
<span class="label">报名时间</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span>
</p>
<p>
<span class="label">比赛时间</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span>
</p>
</div>
</div>
<div class="right">
<p class="status"
:class="{wait: item.status == 0 || item.status == 4,signing: item.status == 2,signed: item.status == 1,finish: item.status == 3 || item.status == 5}"
@click.stop="signup(item)">{{ statusList[item.status] }}</p>
<p class="end-text" v-if="item.status != 5">
距离{{ endList[item.status] }}还有
<template v-if="item.end > 0">{{ item.end }}</template>
<em v-else v-countdown="index">{{ item.end }}</em>
</p>
</div>
</li>
</ul>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals"
@current-change="handleCurrentChange"
:current-page="pageNo">
</el-pagination>
</div>
</template>
<template v-else>
<div class="empty">
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无赛事</p>
</div>
<div class="right">
<p class="status"
:class="{wait: item.status == 0 || item.status == 4,signing: item.status == 2,signed: item.status == 1,finish: item.status == 3 || item.status == 5}"
@click.stop="signup(item)">{{ statusList[item.status] }}</p>
<p class="end-text" v-if="item.status != 5">
距离{{ endList[item.status] }}还有
<template v-if="item.end > 0">{{ item.end }}</template>
<em v-else v-countdown="index">{{ item.end }}</em>
</p>
</div>
</li>
</ul>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals"
@current-change="handleCurrentChange"
:current-page="pageNo">
</el-pagination>
</div>
</template>
<template v-else>
<div class="empty">
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无赛事</p>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</div>
@ -327,242 +327,213 @@ export default {
</script>
<style lang="scss" scoped>
.box {
.search {
position: relative;
.banner-con{
width: 100%;
height: 400px;
background-image: url('../../../assets/img/info-banner.png');
background-size: 100vw 400px;
background-repeat: no-repeat;
padding: 121px 0 167px;
text-align: center;
background: url(../../../assets/img/match-bg.png) 0 0/100% 100% no-repeat;
h6 {
margin-bottom: 25px;
font-size: 32px;
color: #fff;
}
.input {
position: relative;
width: 700px;
margin: 0 auto;
}
.search {
width: 400px;
img {
position: absolute;
top: 175px;
left: 50%;
margin-left: -200px;
border-radius: 30px;
border: 1px solid #9076FF;
border-right: 0;
overflow: hidden;
input {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 20px;
font-size: 14px;
color: #333;
border: 0;
outline: none !important;
box-sizing: border-box;
}
button {
position: absolute;
top: 0;
right: 0;
padding: 0 20px;
line-height: 46px;
color: #fff;
background-color: #9076FF;
border: 0;
outline: none !important;
}
top: 19px;
left: 14px;
}
.main {
input {
width: 100%;
height: 62px;
line-height: 62px;
padding: 0 50px;
font-size: 18px;
color: #333;
border: 0;
outline: none;
border-radius: 4px;
}
}
.main{
background: url(../../../assets/img/match-bg1.png) (0px 95px)/auto auto no-repeat,
url(../../../assets/img/match-bg2.png) (98% bottom)/auto auto no-repeat;
.center-wrap {
display: flex;
justify-content: center;
align-items: flex-start;
padding-bottom: 40px;
.nav {
width: 220px;
border-radius: 8px;
overflow: hidden;
margin-top: -44px;
.sub-title {
line-height: 88px;
color: #fff;
font-size: 24px;
text-align: center;
background: #9076FF;
align-items:flex-start;
}
.nav{
width: 156px;
text-align: right;
overflow: hidden;
background-color: #fff;
li {
padding: 0 24px;
font-size: 16px;
color: #666;
line-height: 48px;
border-bottom: 2px solid #f3f6fa;
border-right: 2px solid transparent;
cursor: pointer;
&:before {
content: '';
display: inline-block;
width: 3px;
height: 3px;
margin-right: 10px;
vertical-align: middle;
border-radius: 50%;
background-color: #666;
}
/deep/ .sidebar {
background-color: #fff;
.item {
padding: 15px 0;
color: rgba(0, 0, 0, .85);
font-size: 18px;
text-align: center;
cursor: pointer;
&.active {
color: #9076FF;
}
&:hover {
background-color: #f4f1ff;
}
&.active {
color: $main-color;
border-right-color: $main-color;
&:before {
background-color: $main-color;
}
}
}
.list-wrap {
width: 50%;
min-width: 790px;
margin: 40px 0 0 40px;
.list {
padding: 32px;
}
.list-wrap {
flex: 1;
margin-left: 24px;
.list {
li {
display: flex;
justify-content: space-between;
padding: 16px;
margin-bottom: 12px;
transition: all 0.3s;
cursor: pointer;
border-radius: 6px;
background-color: #fff;
border-radius: 8px;
li {
.right {
display: flex;
justify-content: space-between;
padding-bottom: 24px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
transition: all 0.3s;
cursor: pointer;
.left {
display: inline-flex;
.cover {
img {
width: 200px;
height: 120px;
border-radius: 4px;
}
flex-direction: column;
justify-content: center;
align-items: flex-end;
flex: 1;
.status {
padding: 0 23px;
line-height: 34px;
font-size: 14px;
color: #fff;
background-color: #52C41A;
border-radius: 4px;
&.wait {
background-color: #FAAD14;
}
.info {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
margin-left: 20px;
.title {
font-size: 20px;
color: rgba(0, 0, 0, .85);
}
.metas {
font-size: 14px;
color: #999;
div {
display: flex;
align-items: center;
margin-bottom: 5px;
&.flex-top {
align-items: flex-start;
}
}
.label, .val {
font-size: 14px;
color: rgba(0, 0, 0, .65);
white-space: nowrap;
}
.val {
max-width: 350px;
}
&.signing {
background-color: #9076FF;
}
.a-line {
display: block;
}
}
&.signed {
background-color: #52C41A;
}
.desc {
font-size: 14px;
}
&.finish {
background-color: #ccc;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
flex: 1;
.btn {
padding: 12px 20px;
color: #fff;
background-color: #cb221c;
border-radius: 4px;
cursor: pointer;
.status {
padding: 0 15px;
line-height: 32px;
font-size: 12px;
color: #fff;
background-color: #52C41A;
border-radius: 4px;
&.wait {
background-color: #FAAD14;
}
&:hover {
opacity: .9;
}
&.signing {
background-color: #9076FF;
}
&.disabled {
cursor: not-allowed;
background-color: #969696;
}
}
&.signed {
background-color: #52C41A;
}
.end-text {
margin-top: 10px;
color: rgba(0, 0, 0, .65);
font-size: 14px;
white-space: nowrap;
em {
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #cb221c;
}
}
}
&.finish {
background-color: rgba(0, 0, 0, .45);
&:hover {
.left {
.info {
.title {
color: $main-color;
}
}
}
}
}
.left {
display: inline-flex;
.cover {
img {
width: 220px;
height: 140px;
border-radius: 6px;
}
}
.btn {
padding: 12px 20px;
color: #fff;
background-color: #cb221c;
border-radius: 4px;
cursor: pointer;
.info {
margin-left: 16px;
.title {
margin: 5px 0 15px;
font-size: 16px;
font-weight: 600;
color: #0B1D30;
}
.metas {
font-size: 14px;
color: #666;
&:hover {
opacity: .9;
}
div {
display: flex;
align-items: center;
margin-bottom: 5px;
&.disabled {
cursor: not-allowed;
background-color: #969696;
&.flex-top {
align-items: flex-start;
}
}
.end-text {
margin-top: 10px;
color: rgba(0, 0, 0, .65);
.label, .val {
font-size: 14px;
color: rgba(0, 0, 0, .65);
white-space: nowrap;
}
em {
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #cb221c;
}
.val {
max-width: 350px;
}
}
&:hover {
.left {
.info {
.title {
color: #9076FF;
}
}
.a-line {
display: block;
}
}
border-bottom-color: #9076FF;
.desc {
font-size: 14px;
}
}
}

@ -3,8 +3,6 @@
<el-table
ref="table"
class="table"
:cell-style="tableRowStyle"
:header-cell-style="{background:'#9278FF',color:'#FFFFFF'}"
:data="listData"
stripe
>

@ -1,44 +1,47 @@
<template>
<!-- 实验记录 -->
<div style="padding: 0 24px">
<div class="m-b-20">
<div class="overview">
<h6>实验概览</h6>
<div class="nums">
<div class="item">
<p class="name">姓名</p>
<p class="val">{{ overview.userName }}</p>
</div>
<div class="wrap">
<div class="block overview">
<h6 class="l-title">
<img src="@/assets/img/record5.png" alt="">
实验概览
</h6>
<div class="nums">
<div class="item">
<p class="val">{{ overview.userName }}</p>
<p class="name">姓名</p>
</div>
<div class="item">
<p class="name">实验次数</p>
<p class="val">{{ overview.experimentalNum }}</p>
</div>
<div class="item">
<p class="val">{{ overview.experimentalNum }}</p>
<p class="name">实验次数()</p>
</div>
<div class="item">
<p class="name">实验总时长</p>
<p class="val">{{ overview.duration ? overview.duration : 0 }}小时</p>
</div>
<div class="item">
<p class="val">{{ overview.duration ? overview.duration : 0 }}小时</p>
<p class="name">实验总时长()</p>
</div>
<div class="item">
<p class="name">实验平均分</p>
<p class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</p>
</div>
<div class="item">
<p class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</p>
<p class="name">实验平均分</p>
</div>
</div>
</div>
<div class="page">
<div class="tabs">
<a class="item" v-for="(item,index) in tabList" :key="index" :class="{active: index == active}"
@click="tabChange(index)">{{ item }}</a>
</div>
<div class="block record">
<h6 class="l-title">
<img src="@/assets/img/record6.png" alt="">
实验记录明细
</h6>
<div class="tool">
<ul class="filter" style="justify-content: space-between;">
<div style="font-size: 16px">实验记录明细</div>
<div class="tabs">
<a class="item" v-for="(item,index) in tabList" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a>
</div>
<li style="margin-right: 0">
<label>课程选择</label>
<label>课程选择</label>
<el-select v-model="curriculumId">
<el-option
v-for="item in curriculumList"
@ -47,7 +50,7 @@
:value="item.cid"
></el-option>
</el-select>
<el-button style="margin-left: 20px;" size="small" round type="primary" @click="exportData">导出</el-button>
<el-button style="width: 88px;margin-left: 20px;" type="primary" @click="exportData">导出数据</el-button>
</li>
</ul>
</div>
@ -149,87 +152,81 @@ export default {
</script>
<style lang="scss" scoped>
.tabs {
display: flex;
align-items: center;
padding: 20px 0 0;
margin-bottom: 10px;
background-color: #fff;
.item {
padding: 12px 20px;
margin-right: 10px;
color: #606266;
line-height: 1;
border-radius: 4px;
background-color: #fff;
border: 1px solid #dcdfe6;
cursor: pointer;
&.active {
color: #fff;
background-color: #9278ff;
border-color: #9278ff;
.block {
padding: 16px;
margin-bottom: 20px;
background: #fff;
.l-title {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
font-weight: 400;
img {
margin-right: 5px;
}
}
}
.overview {
padding: 20px;
margin-top: 20px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1);
border-radius: 10px;
h6 {
margin-bottom: 10px;
font-size: 16px;
font-weight: 400;
}
.nums {
display: flex;
justify-content: space-between;
.item:nth-child(1) {
background-image: url('../../../assets/img/student1.png');
box-shadow: 0px 25px 20px -22px #ec92e0;
background-image: url('../../../assets/img/record1.png');
}
.item:nth-child(2) {
background-image: url('../../../assets/img/student2.png');
box-shadow: 0px 25px 20px -22px #60b8f6;
background-image: url('../../../assets/img/record2.png');
}
.item:nth-child(3) {
background-image: url('../../../assets/img/student3.png');
box-shadow: 0px 25px 20px -22px #fe787a;
background-image: url('../../../assets/img/record3.png');
}
.item:nth-child(4) {
background-image: url('../../../assets/img/student4.png');
box-shadow: 0px 25px 20px -22px #fbbb6e;
margin-right: 0;
background-image: url('../../../assets/img/record4.png');
}
.item {
width: 24%;
padding: 20px 30px;
box-shadow: 0px 3px 18px 0px rgba(84, 84, 84, 0.09);
border-radius: 8px;
flex: 1;
padding: 26px 27px;
margin-right: 19px;
background-size: 100% 100%;
background-repeat: no-repeat;
.name {
font-size: 18px;
color: #ffffff;
margin-top: 12px;
color: #fff;
font-size: 14px;
}
.val {
margin-top: 10px;
color: #ffffff;
font-size: 30px;
font-size: 26px;
color: #fff;
}
}
}
}
.record {
.tool {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
}
.tabs {
display: inline-flex;
align-items: center;
.item {
width: 80px;
margin-right: 16px;
text-align: center;
color: #666;
line-height: 34px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #CACFDB;
cursor: pointer;
&.active {
color: #fff;
background-color: $main-color;
border-color: $main-color;
}
}
}
</style>

@ -1,7 +1,6 @@
<template>
<div>
<el-table :cell-style="tableRowStyle" :header-cell-style="{background:'#9278FF',color:'#FFFFFF'}"
:data="listData" stripe>
<el-table :data="listData" stripe>
<el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column>
<el-table-column prop="curriculumName" label="课程名称" align="center"></el-table-column>
<el-table-column prop="projectName" label="实验项目名称" align="center"></el-table-column>
@ -16,8 +15,7 @@
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background :current-page="page" layout="total, prev, pager, next" :total="total"
@current-change="handleCurrentChange"></el-pagination>
<el-pagination background :current-page="page" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
</div>
</div>
</template>

File diff suppressed because it is too large Load Diff

@ -0,0 +1,931 @@
<template>
<div>
<div class="scroll">
<div class="page">
<h6 class="l-title"><img src="@/assets/img/info1.png" alt=""> 用户信息</h6>
<div class="page-content">
<ul class="list">
<div class="line info">
<li>
<label>姓名</label>
<el-input size="small" v-model="form.userName" clearable></el-input>
</li>
<li>
<label>所在国家</label>
<el-select size="small" v-model="form.countries">
<el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label"></el-option>
</el-select>
</li>
</div>
<div class="line info">
<li>
<label>性别</label>
<el-select size="small" v-model="form.sex">
<el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</li>
<li class="selects">
<label>所在地</label>
<div class="mul">
<div class="child">
<el-select size="small" v-model="form.countries" placeholder>
<el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label"></el-option>
</el-select>
</div>
<div class="child">
<el-select size="small" v-model="form.provinceId" placeholder @change="id => getCity(id,1)">
<el-option v-for="item in provinceList" :key="item.provinceId" :label="item.provinceName" :value="item.provinceId"></el-option>
</el-select>
</div>
<div class="child">
<el-select size="small" v-model="form.cityId" placeholder :disabled="form.provinceId ? false : true">
<el-option v-for="item in cityList" :key="item.cityId" :label="item.cityName" :value="item.cityId"></el-option>
</el-select>
</div>
</div>
</li>
</div>
<div class="line info">
<li>
<label>出生年月</label>
<el-date-picker size="small" placeholder="请选择时间" v-model="form.dateBirth" :clearable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</li>
<li>
<label>证件</label>
<el-input size="small" placeholder="请输入证件" v-model="form.idNumber" clearable></el-input>
</li>
</div>
<div class="line info">
<li>
<label>教育程度</label>
<el-select size="small" v-model="form.educationDegree" placeholder="请选择教育程度">
<el-option v-for="(item,index) in educationDegreeList" :key="index" :label="item.name" :value="item.value"></el-option>
</el-select>
</li>
<li>
<label>当前所在学校</label>
<el-input size="small" placeholder="请输入学校" v-model="form.schoolName" clearable></el-input>
</li>
</div>
</ul>
</div>
<div class="flex j-between a-center m-r-20">
<h6 class="l-title"><img src="@/assets/img/info2.png" alt=""> 个人档案</h6>
<el-button type="text" icon="el-icon-plus" style="margin-left: 16px" @click="addArch">新增</el-button>
</div>
<div class="page-content">
<div class="archives" v-for="(archive,index) in archivesList" :key="index" v-show="index == 0 || showArch">
<ul class="list">
<div class="line">
<li>
<label>职业</label>
<el-select size="small" v-model="archive.personalCareerId" placeholder="选择职业">
<el-option v-for="item in occupationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</li>
<li>
<label>所属国家</label>
<el-select size="small" v-model="form.countries" placeholder>
<el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label" ></el-option>
</el-select>
</li>
<li>
<label>学校名称</label>
<el-select size="small" v-model="archive.schoolId" filterable placeholder="选择学校" @change="id => getSchoolName(id,index)">
<el-option v-for="item in schoolList" :key="item.value" :label="item.schoolName" :value="item.schoolId"></el-option>
</el-select>
</li>
</div>
<div class="line" style="margin-bottom: 0">
<li>
<label>专业学科</label>
<el-select size="small" v-model="archive.disciplineId" placeholder="选择专业学科" @change="id => getItemProfessionalClass(id,index)" @clear="() => clearItemClass(index)">
<el-option v-for="item in subjectList" :key="item.value" :label="item.disciplineName" :value="item.disciplineId"></el-option>
</el-select>
</li>
<li>
<label>专业类</label>
<el-select size="small" v-model="archive.professionalClassId" placeholder="选择专业类" :disabled="archive.disciplineId ? false : true" @change="id => getItemProfessional(id,index)" @clear="() => clearItemProfess(index)">
<el-option v-for="item in archive.ProfessionalClassList" :key="item.professionalClassId" :label="item.professionalClassName" :value="item.professionalClassId"></el-option>
</el-select>
</li>
<li>
<label>专业</label>
<el-select size="small" v-model="archive.professionalId" placeholder="选择专业" :disabled="archive.professionalClassId ? false : true" @change="getItemStuGrade">
<el-option v-for="item in archive.ProfessionalList" :key="item.professionalId" :label="item.professionalName" :value="item.professionalId"></el-option>
</el-select>
</li>
</div>
</ul>
<img class="del" src="@/assets/img/trash.png" alt="" v-if="index" @click="delArchive(index)">
</div>
<div class="fold" v-if="archivesList.length > 1">
<span :class="{active: showArch}" @click="showArch = !showArch">
展开更多
<i class="el-icon-arrow-down"></i>
</span>
</div>
</div>
</div>
<div class="page">
<h6 class="l-title"><img src="@/assets/img/info3.png" alt=""> 账号信息</h6>
<div class="page-content">
<ul class="list">
<div class="line info imp">
<li>
<label>用户账号</label>
<el-input class="m-r-10" size="small" v-model="form.account" clearable disabled></el-input>
<el-button type="text" size="small" @click="openAccount">编辑</el-button>
</li>
<li>
<label>手机号</label>
<el-input class="m-r-10" type="text" size="small" v-model="form.phone" disabled></el-input>
<el-button type="text" size="small" @click="bindPhone">更换</el-button>
</li>
</div>
<div class="line info imp">
<li>
<label>邮箱</label>
<el-input class="m-r-10" size="small" v-model="form.email" disabled></el-input>
<el-button v-if="form.email" type="text" size="small" @click="bindEmail">更换</el-button>
<el-button v-else type="text" size="small" @click="bindEmail">添加</el-button>
</li>
<li>
<label>密码</label>
<el-input class="m-r-10" size="small" value="xxxxxxxx" disabled></el-input>
<el-button type="text" size="small" @click="bindPassword">更换</el-button>
</li>
</div>
</ul>
</div>
</div>
</div>
<div class="btns">
<el-button size="small" v-throttle @click="$router.back()">取消</el-button>
<el-button type="primary" size="small" v-throttle @click="save">更新</el-button>
</div>
<el-dialog :title="form.email ? '更换邮箱' : '绑定邮箱'" :visible.sync="emailVisible" :close-on-click-modal="false" @close="closeEmail" width="30%">
<el-form ref="form" :model="form" label-width="60px">
<el-form-item label="邮箱">
<el-input style="width: 394px;" placeholder="请输入邮箱" v-model="email"></el-input>
</el-form-item>
<el-form-item label="验证码">
<div class="flex">
<el-input v-model="emailCode" placeholder="请输入验证码" maxlength="6"></el-input>
<el-button style="margin-left: 10px" type="text" @click="sendEmailCode" :disabled="emailDisabled">{{emailBtnText}}</el-button>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="emailVisible = false"> </el-button>
<el-button size="small" type="primary" @click="emailSubmit"> </el-button>
</span>
</el-dialog>
<el-dialog :title="form.phone ? '更换手机号' : '绑定手机号'" :visible.sync="phoneVisible" :close-on-click-modal="false" @close="closePhone" width="30%">
<el-form ref="form" :model="form" label-width="60px">
<el-form-item label="手机号">
<el-input style="width: 394px;" placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="验证码">
<div class="flex">
<el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
<el-button style="margin-left: 10px" type="text" @click="sendPhoneCode" :disabled="phoneDisabled">{{phoneBtnText}}</el-button>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="phoneVisible = false"> </el-button>
<el-button size="small" type="primary" @click="phoneSubmit"> </el-button>
</span>
</el-dialog>
<el-dialog title="更换密码" :visible.sync="passwordVisible" :close-on-click-modal="false" @close="closePassword" width="30%">
<el-form ref="passwordForm" :model="form" label-width="82px">
<el-form-item label="原密码">
<el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
</el-form-item>
<el-form-item label="新密码">
<el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" @keyup.enter.native="editPassword"></el-input>
</el-form-item>
<el-form-item label="确认新密码">
<el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="editPassword"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="passwordVisible = false"> </el-button>
<el-button size="small" type="primary" @click="editPassword"> </el-button>
</span>
</el-dialog>
<el-dialog title="修改用户账号" :visible.sync="accountVisible" :close-on-click-modal="false" width="30%">
<el-form label-width="82px">
<el-form-item label="用户账号">
<el-input v-model="account" placeholder="请输入用户账号"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="accountVisible = false"> </el-button>
<el-button size="small" type="primary" @click="confirmAccount"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapState,mapActions } from 'vuex'
import util from '@/libs/util'
export default {
data() {
return {
form: {
name:'',
workNumber:'',
password:"",
phone:'',
email:'',
provinceName:'',
cityName:'',
schoolName:'',
professionalName:'',
experimentName:'',
sex: 1,
dateBirth: '',
educationDegree: ''
},
emailVisible: false,
passwordVisible: false,
phoneVisible: false,
showArch: false,
passwordForm: {
password: '',
newPassword: '',
reNewPassword: ''
},
sexList: [
{
name: '男',
value: 1
},
{
name: '女',
value: 2
}
],
countryList: [
{
label: '中国'
}
],
occupationList: [{
value: 1,
label: '学生'
},{
value: 2,
label: '老师'
}],
provinceList:[],
cityList: [],
educationDegreeList: [
{
name: '专科',
value: 1
},
{
name: '本科',
value: 2
},
{
name: '硕士',
value: 3
},
{
name: '博士',
value: 4
},
{
name: '其他',
value: 5
}
],
subjectList: [], //
ProfessionalClassList: [], //
ProfessionalList: [], //
schoolList: [],
curPassword: '',
accountRepeat: false,
archivesList: [],
archivesForm: {
personalCareerId: '',
schoolId: '',
schoolName: '',
professionalClassId: '',
professionalClassName: '',
disciplineId: '',
disciplineName: '',
professionalId: '',
professionalName: '',
},
email: '',
emailBtnText: '发送验证码',
emailCode: '',
emailDisabled: false,
emailTimer: null,
phone: '',
phoneBtnText: '发送验证码',
phoneCode: '',
phoneDisabled: false,
phoneTimer: null,
updateTime: 0,
account: '',
accountVisible: false
};
},
watch: {
// ,
form: {
handler(){
this.updateTime++
if(this.updateTime > 1) this.$emit('updateStatus',this.updateTime > 1)
},
deep:true
}
},
mounted() {
this.getdata()
this.getProvince()
this.getSchoolData()
this.getSubject()
if (!this.archivesList.length) this.archivesList = [JSON.parse(JSON.stringify(this.archivesForm))]
},
methods: {
...mapActions('user', [
'setAvatar','setUserName'
]),
getdata() {
this.$get(this.api.queryUserInfoDetails).then(res => {
let userInfo = res.result.hrUserInfo
let schoolId = userInfo.schoolId
this.form = Object.assign(userInfo, res.result.userAccountList[0])
this.form.schoolId = schoolId
this.form.accountId = userInfo.id
this.originAccount = this.form.account
this.archivesList = res.result.personalFileList
this.$nextTick(() => {
if(this.form.provinceId){
this.getCityData(1)
}
if(this.archivesList.length != 0){
this.archivesList.forEach((e,k) =>{
this.$set(e, 'subjectList', this.subjectList)
this.$set(e, 'disciplineId', e.disciplineId ? e.disciplineId : '')
this.$set(e, 'disciplineName', e.disciplineName ? e.disciplineName : '')
this.$set(e, 'professionalClassId', e.professionalClassId ? e.professionalClassId : '')
this.$set(e, 'professionalClassName', e.professionalClassName ? e.professionalClassName : '')
this.$set(e, 'professionalId', e.professionalId ? e.professionalId : '')
this.$set(e, 'professionalName', e.professionalName ? e.professionalName : '')
this.$set(e, 'schoolId', e.schoolId ? e.schoolId : '')
this.$set(e, 'schoolName', e.schoolName ? e.schoolName : '')
if(e.disciplineId){
this.$get(this.api.queryCourseProfessionalClass, {disciplineId: e.disciplineId }).then(res => {
this.$set(e, 'ProfessionalClassList', res.list)
}).catch(res => {})
}else{
this.$set(e, 'ProfessionalClassList', [])
}
if(e.professionalClassId){
this.$get(this.api.queryCourseProfessional,{ professionalClassId: e.professionalClassId }).then(res => {
this.$set(e, 'ProfessionalList', res.list)
}).catch(res => {})
}else{
this.$set(e, 'ProfessionalList', [])
}
})
}else{
this.concatArch()
}
})
}).catch(err => {})
},
getProvince(){
this.$get(this.api.queryProvince).then(res => {
this.provinceList = res.list
}).catch(res => {})
},
getCity(id,type){
this.form.cityId = 1
this.getCityData()
},
getCityData(index){
let provinceId = this.form.provinceId
this.$get(this.api.queryCity,{provinceId}).then(res => {
this.cityList = res.list
}).catch(res => {})
},
getCityName(id,index){
this.archivesList[index].cityName = this.archivesList[index].cityList[id-1].cityName
},
getSchoolName(id,index){
const school = this.schoolList.find(e => e.schoolId == id)
if (school) this.archivesList[index].schoolName = school.schoolName
},
getSchoolData(){
this.$get(this.api.querySchool,{schoolName: '',provinceId: this.provinceId,cityId: this.cityId}).then(res => {
this.schoolList = res.list
}).catch(res => {})
},
accountChange(){
this.$get(`${this.api.getAccount}?account=${this.form.account}`).then(res => {
if(res.data.userInfo){
this.accountRepeat = true
util.warningMsg('该账号已存在')
}else{
this.accountRepeat = false
}
}).catch(res => {})
},
save() {
if (this.form.idNumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(this.form.idNumber)) return util.warningMsg("请输入正确的证件号码");
let form = this.form;
let personalFileList = []
this.archivesList.forEach((n,k) => {
n.personalCareerId && personalFileList.push({
disciplineId: n.disciplineId,
disciplineName: n.disciplineName,
personalCareerId: n.personalCareerId,
personalFileId: n.personalFileId,
professionalClassId: n.professionalClassId,
professionalClassName: n.professionalClassName,
professionalId: n.professionalId,
professionalName: n.professionalName,
provinceId: n.provinceId,
provinceName: n.provinceName,
schoolId: n.schoolId,
schoolName: n.schoolName,
userId: form.userId
})
})
let data = {
userId: form.userId,
userAccountList: [{
id: form.accountId,
account: form.account,
userId: form.userId,
}],
hrUserInfo: {
provinceId: form.provinceId,
cityId: form.cityId,
countries: form.countries,
dateBirth: form.dateBirth,
educationDegree: form.educationDegree,
idNumber: form.idNumber,
schoolId: form.schoolId,
sex: form.sex,
userId: form.userId,
userName: form.userName,
wechatId: form.wechatId
},
personalFileList,
}
this.$post(this.api.updatePersonCenter,data).then(res => {
this.setUserName(form.userName);
this.$message.success('提交成功!')
}).catch(res => {})
},
concatArch() {
this.archivesList = this.archivesList.concat({
countries: '中国',
personalCareerId: '',
schoolId: '',
schoolName: '',
subjectList: this.subjectList,
disciplineId: '',
disciplineName: '',
ProfessionalClassList: [],
professionalClassId: '',
professionalClassName: '',
ProfessionalList: [],
professionalId: '',
professionalName: '',
personalFileId: ''
})
},
addArch() {
let isEmpty = false
this.archivesList.forEach((n,k) => {
if(!n.personalCareerId) isEmpty = true
})
if(isEmpty) return util.warningMsg('请选择职业')
this.showArch = true
this.concatArch()
},
delArchive(i) {
this.$confirm(`此操作不可逆,是否确认删除?`, '提示', {
type: 'warning'
}).then(() => {
const id = this.archivesList[i].personalFileId
this.archivesList.splice(i, 1)
id && this.$post(`${this.api.deleteProfile}?personalFileIds=${id}`).then(res => {}).catch(err => {})
}).catch(() => {})
},
bindEmail() {
this.email = this.form.email
this.emailVisible = true
},
bindPhone() {
this.phoneVisible = true
},
bindPassword() {
this.passwordVisible = true
},
editPassword() {
if(!this.passwordForm.password) return util.warningMsg('请输入原密码')
if(!this.passwordForm.newPassword) return util.warningMsg('请输入新密码')
if(!this.passwordForm.reNewPassword) return util.warningMsg('请确认新密码')
if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg('请输入6位数以上的密码')
if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg('输入的新密码不一致,请重新确认')
if(this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg('原密码跟新密码不能一致')
let data = this.passwordForm
data.accountId = this.form.id
this.$post(this.api.examinePassword,data).then(res => {
util.successMsg('更换成功')
this.passwordVisible = false
}).catch(err => {})
},
closePassword() {
this.passwordForm = {
password: '',
newPassword: '',
reNewPassword: ''
}
},
foldArch() {
this.showArch = !this.showArch
this.$nextTick(() => {
document.body.scrollTop = document.querySelector('.content-box').scrollHeight
document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight
})
},
//
getSubject(){
this.$get(this.api.queryCourseDiscipline).then(res => {
this.subjectList = res.list
}).catch(res => {})
},
//
clearClass(){
this.archivesForm.professionalClassId = '',
this.archivesForm.professionalId = ''
},
//
getProfessionalClass(val){
this.clearClass()
if(val){
let obj = {}
obj = this.subjectList.find((item)=>{
return item.disciplineId === val
});
this.archivesForm.disciplineName = obj.disciplineName
this.getProfessionalClassData(val)
}
},
clearItemClass(index){
this.archivesList[index].professionalClassId = ''
this.archivesList[index].professionalClassName = ''
this.archivesList[index].professionalId = ''
this.archivesList[index].professionalName = ''
},
getItemProfessionalClass(item,index){
this.clearItemClass(index)
if(item){
let obj = {}
obj = this.subjectList.find(r =>{
return r.disciplineId === item
});
this.$get(this.api.queryCourseProfessionalClass, { disciplineId: item }).then(res => {
this.archivesList.map(e =>{
if(e.disciplineId == item){
e.ProfessionalClassList = res.list
e.disciplineName = obj.disciplineName
}
})
}).catch(res => {})
}
},
getProfessionalClassData(value){
this.$get(this.api.queryCourseProfessionalClass, {
disciplineId: value
}).then(res => {
this.ProfessionalClassList = res.list
}).catch(res => {})
},
//
clearProfess(){
this.archivesForm.professionalId = ''
},
//
getProfessional(val){
this.clearProfess()
if(val){
let obj = {}
obj = this.ProfessionalClassList.find((item)=>{
return item.professionalClassId === val
})
this.archivesForm.professionalClassName = obj.professionalClassName
this.getProfessionalData(val)
}
},
clearItemProfess(index){
this.archivesList[index].professionalId = ''
this.archivesList[index].professionalName = ''
},
getItemProfessional(item,index){
this.clearItemProfess(index)
if(item){
this.$get(this.api.queryCourseProfessional,{ professionalClassId: item }).then(res => {
this.archivesList.map(e =>{
if(e.professionalClassId == item){
let obj = {}
obj = e.ProfessionalClassList.find(r =>{
return r.professionalClassId === item
})
e.ProfessionalList = res.list
e.professionalClassName = obj.professionalClassName
}
})
}).catch(res => {})
}
},
getProfessionalData(value){
this.$get(this.api.queryCourseProfessional,{professionalClassId: value}).then(res => {
this.ProfessionalList = res.list
}).catch(res => {})
},
//
getStuGrade(val){
if(val){
let obj = {}
obj = this.ProfessionalList.find(r =>{
return r.professionalId === val;
})
this.archivesForm.professionalName = obj.professionalName
}
},
getItemStuGrade(item){
if(item){
this.archivesList.map(e =>{
if(e.professionalId == item){
let obj = {}
obj = e.ProfessionalList.find(r =>{
return r.professionalId === item;
})
e.professionalName = obj.professionalName
}
})
}
},
emailCountdown(){
let count = 60
if(!this.emailTimer){
this.emailDisabled = true
this.emailTimer = setInterval(() => {
console.log('倒计时中')
if(count > 0){
count--
this.emailBtnText = `${count}秒后重试`
}else{
this.emailDisabled = false
clearInterval(this.emailTimer)
this.emailTimer = null
this.emailBtnText = `发送验证码`
}
},1000)
}
},
phoneCountdown(){
let count = 60
if(!this.phoneTimer){
this.phoneDisabled = true
this.phoneTimer = setInterval(() => {
console.log('倒计时中')
if(count > 0){
count--
this.phoneBtnText = `${count}秒后重试`
}else{
this.phoneDisabled = false
clearInterval(this.phoneTimer)
this.phoneTimer = null
this.phoneBtnText = `发送验证码`
}
},1000)
}
},
closeEmail(){
this.emailCode = ''
},
sendEmailCode(){
if(!this.email) return util.warningMsg('请输入邮箱')
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg('请输入正确的邮箱')
let data = {
userId: this.form.userId,
email: this.email,
types: 1
}
this.$post(this.api.sendPhoneOrEmailCode,data).then(res => {
if(res.message.opener){
this.emailCountdown()
this.emailOpener = res.message.opener
}else{
util.errorMsg(res.message)
}
}).catch(res => {})
},
emailSubmit(){
if(!this.email) return util.warningMsg('请输入邮箱')
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg('请输入正确的邮箱')
if(!this.emailCode) return util.warningMsg('请输入验证码')
let data = {
userId: this.form.userId,
email: this.email,
types: 1,
code: this.emailCode,
opener: this.emailOpener
}
this.$post(this.api.bindPhoneOrEmail,data).then(res => {
util.successMsg('绑定成功')
this.form.email = this.email
this.emailVisible = false
}).catch(res => {})
},
closePhone(){
this.phoneCode = ''
},
sendPhoneCode(){
if(!this.phone) return util.warningMsg('请输入手机号')
if(!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg('请输入正确的手机号')
let data = {
userId: this.form.userId,
phone: this.phone,
types: 2
}
this.$post(this.api.sendPhoneOrEmailCode,data).then(res => {
if(res.message.opener){
this.phoneCountdown()
this.phoneOpener = res.message.opener
}else{
util.errorMsg(res.message)
}
}).catch(res => {})
},
phoneSubmit(){
if(!this.phone) return util.warningMsg('请输入手机号')
if(!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg('请输入正确的手机号')
if(!this.phoneCode) return util.warningMsg('请输入验证码')
let data = {
userId: this.form.userId,
phone: this.phone,
types: 2,
code: this.phoneCode,
opener: this.phoneOpener
}
this.$post(this.api.bindPhoneOrEmail,data).then(res => {
util.successMsg('绑定成功')
this.form.phone = this.phone
this.phoneVisible = false
}).catch(res => {})
},
openAccount() {
this.account = this.form.account
this.accountVisible = true
},
confirmAccount() {
if (this.account) {
this.form.account = this.account
this.accountVisible = false
} else {
util.errorMsg('请输入账号')
}
}
}
};
</script>
<style lang="scss" scoped>
.scroll{
height: calc(100vh - 202px);
overflow: auto;
}
.page{
margin-bottom: 12px;
/deep/.el-input__inner{
border-color: #CACFDB;
}
.list{
.line{
display: flex;
margin-bottom: 24px;
&.info li:not(.selects){
width: 30%;
.el-input{
flex: 1;
}
&:first-child{
margin-right: 16%;
}
}
&.imp li{
width: calc(30% + 36px) !important;
}
}
li{
display: inline-flex;
align-items: center;
&>label{
width: 100px;
margin-right: 5px;
text-align: right;
font-size: 14px;
color: #4c4c4c;
}
.el-input{
width: 220px;
.el-input__inner{
border-color: #CACFDB;
}
}
.el-select .el-input.is-disabled .el-input__inner{
border-color: #ddd;
}
.val{
margin-right: 15px;
color: #606266;
font-size: 14px;
}
.mul{
display: inline-flex;
.child{
display: inline-flex;
width: 132px;
margin-right: 10px;
&>span{
margin-bottom: 5px;
font-size: 14px;
color: #575757;
}
}
}
}
}
.archives{
position: relative;
padding: 16px 0;
margin-bottom: 6px;
border-radius: 4px;
background-color: #FAFAFA;
.del{
position: absolute;
top: 48px;
right: 16px;
cursor: pointer;
}
li{
width: 30%;
margin-right: 32px;
}
.el-select{
flex: 1;
}
}
.fold{
margin-top: 20px;
text-align: center;
font-size: 12px;
color: #006EFF;
span{
cursor: pointer;
i{
transition: .5s;
}
&.active i{
transform: rotate(180deg);
}
}
}
}
.btns{
width: 100%;
padding: 12px 0;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(188, 201, 218, 0.4);
.el-button{
width: 80px;
}
}
</style>

@ -1,9 +1,12 @@
<template>
<!-- 实验台 -->
<div class="box">
<div class="box index">
<div class="search">
<input type="text" placeholder="请输入关键词" v-model="keyword">
<button>搜索</button>
<h6>创新实验智能教学</h6>
<div class="input">
<img src="@/assets/img/search.png" alt="">
<input type="text" placeholder="请输入关键词" v-model="keyword">
</div>
</div>
<div class="wrap">
<template v-for="(item,index) in curriculumList">
@ -18,7 +21,6 @@
<script>
export default {
name: "backstage",
data() {
return {
keyword: "",
@ -37,7 +39,6 @@ export default {
});
},
goPreview(item) {
// let systemName = item.name.replace("<br>","")
this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}`);
},
}
@ -45,45 +46,36 @@ export default {
</script>
<style lang="scss" scoped>
.box {
padding: 20px;
background-color: #fff;
}
/deep/ .el-card {
margin-bottom: 0;
}
.search {
position: relative;
width: 30%;
margin: 100px auto 150px;
border-radius: 30px;
border: 1px solid #9076FF;
border-right: 0;
overflow: hidden;
padding: 121px 0 167px;
text-align: center;
background: url(../../../assets/img/station-bg.png) 0 0/100% 100% no-repeat;
h6 {
margin-bottom: 25px;
font-size: 32px;
color: #fff;
}
.input {
position: relative;
width: 700px;
margin: 0 auto;
}
img {
position: absolute;
top: 19px;
left: 14px;
}
input {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 20px;
font-size: 14px;
height: 62px;
line-height: 62px;
padding: 0 50px;
font-size: 18px;
color: #333;
border: 0;
outline: none !important;
box-sizing: border-box;
}
button {
position: absolute;
top: 0;
right: 0;
padding: 0 20px;
line-height: 46px;
color: #fff;
background-color: #9076FF;
border: 0;
outline: none !important;
outline: none;
border-radius: 4px;
}
}

@ -9,7 +9,7 @@ router.beforeEach((to, from, next) => {
if (!role && to.path !== '/login' && !whiteList.includes(to.path)) {
next('/index/list')
} else if(role && to.path == '/login') {
next('/index')
next('/station')
} else {
next()
}

@ -1,4 +1,5 @@
@import "./default/index.scss";
@import "./var.scss";
@font-face {
font-family: youshe;
@ -25,7 +26,28 @@
border-radius: 6px;
background: rgba(142, 123, 253, .75);
}
.main {
.view {
min-width: $min-width;
min-height: calc(100vh - 134px);
padding: 12px 200px 0;
margin: 0 auto;
background-color: #F3F6FA;
&.no-pd {
padding-top: 0;
}
}
.wrap-inner {
min-width: $min-width;
width: 100%;
padding: 0 200px;
margin: 0 auto;
}
.center-wrap {
width: 1000px;
margin: 40px auto 0;
}
}
.p-title {
padding-left: 5px;
margin-bottom: 24px;
@ -126,42 +148,85 @@
.pagination {
margin: 20px 0;
text-align: center;
button, .number {
color: rgba(0, 0, 0, .65) !important;
background-color: transparent !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 4px !important;
button,.number,.more,.el-input__inner{
min-width: 32px !important;
height: 32px !important;
line-height: 32px;
color: #333 !important;
background-color: transparent !important;
border: 1px solid #ccc !important;
border-radius: 2px !important;
}
button i {
color: #333;
button i{
color: #333;
}
.active {
color: #fff !important;
background-color: $--color-primary !important;
.active{
color: #fff !important;
background-color: $--color-primary !important;
}
}
.el-table {
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 0;
th {
background: $--color-primary !important;
.cell {
color: #fff;
font-size: 14px;
font-weight: normal;
.el-checkbox {
&:before {
opacity: 1;
}
.el-table{
border-radius: 4px;
.cell{
font-size: 12px;
.el-checkbox{
&:before{
content: '全选';
margin-right: 5px;
color: #222326;
font-size: 12px;
opacity: 0;
}
}
}
}
th{
background: #E8F0FF !important;
.cell{
color: #222326;
font-size: 12px;
font-weight: normal;
.el-checkbox{
&:before{
opacity: 1;
}
}
}
}
th, td{
padding: 10px 0;
border-bottom-color: #E1E6F2;
}
&.el-table--striped .el-table__body tr.el-table__row--striped td{
background-color: #FAFBFF;
}
.el-checkbox__inner{
border-radius: 4px;
transition: none !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner{
background-color: #FFFFFF;
border-color: #DCDFE6;
}
.el-switch__core{
background-color: #bfbfbf;
}
.el-switch__label--right{
z-index: 2;
position: absolute;
right: 8px;
margin-left: 0;
color: #fff !important;
}
.el-switch__label--right.is-active{
left: 8px;
right: auto;
}
.el-switch__label--right span{
font-size: 12px;
}
.el-button--text{
padding: 0;
}
}

Loading…
Cancel
Save