课程、赛事等制作

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

@ -145,7 +145,7 @@ export default {
if (valid) { if (valid) {
this.form.distinguish = Number(this.activeName); this.form.distinguish = Number(this.activeName);
this.login(this.form).then(() => { 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); this.$router.replace(redirect);
}).catch(res => { }).catch(res => {
if (res && res.status == 30001) { if (res && res.status == 30001) {

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

@ -1,26 +1,24 @@
<template> <template>
<div class="box"> <div class="wrap index">
<div class="search"> <div class="search">
<input type="text" placeholder="请输入课程名称" v-model="keyword" /> <h6>精品课程精彩讲解</h6>
<button>搜索</button> <div class="input">
<img src="@/assets/img/search.png" alt="">
<input type="text" placeholder="请输入课程名称" v-model="keyword">
</div>
</div> </div>
<!-- 课程筛选 -->
<div class="main"> <div class="filter">
<div class="filter"> <div class="wrap-inner">
<dl> <dl>
<dt>课程分类</dt> <dt>课程分类</dt>
<dd> <dd v-for="(item, index) in classificationList" :key="index" :class="{active: classificationId == item.id}" @click="changeType(item.id)">{{ item.name }}</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>
</dl> </dl>
</div> </div>
</div>
<div class="courses"> <!-- 课程列表 -->
<div class="courses">
<div class="wrap-inner">
<template v-if="courseData.length"> <template v-if="courseData.length">
<ul> <ul>
<li v-for="(item, index) in courseData" :key="index" @click="toDetail(item.id)"> <li v-for="(item, index) in courseData" :key="index" @click="toDetail(item.id)">
@ -30,8 +28,7 @@
</li> </li>
</ul> </ul>
<div class="pagination"> <div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals" <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
@current-change="handleCurrentChange" :current-page="pageNo">
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
@ -51,7 +48,6 @@
<script> <script>
import { Loading } from "element-ui"; import { Loading } from "element-ui";
import bus from "@/libs/bus"; import bus from "@/libs/bus";
export default { export default {
name: "course", name: "course",
data() { data() {
@ -59,7 +55,12 @@ export default {
userId: this.$store.state.userId, userId: this.$store.state.userId,
schoolId: this.$store.state.schoolId, schoolId: this.$store.state.schoolId,
classificationId: "", classificationId: "",
classificationList: [], classificationList: [
{
id: '',
name: '不限'
}
],
courseData: [], courseData: [],
keyword: "", keyword: "",
totals: 0, totals: 0,
@ -108,9 +109,8 @@ export default {
}, },
getClassification() { getClassification() {
this.$get(this.api.queryGlClassification).then(res => { this.$get(this.api.queryGlClassification).then(res => {
this.classificationList = res.classificationList; this.classificationList = [...this.classificationList, ...res.classificationList]
}).catch(res => { }).catch(res => {})
});
}, },
changeType(type) { changeType(type) {
this.classificationId = type; this.classificationId = type;
@ -128,148 +128,118 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .search {
padding: 20px; position: relative;
background-color: #fff; padding: 121px 0 167px;
text-align: center;
.search { background: url(../../../assets/img/course-bg.png) 0 0/100% 100% no-repeat;
position: relative; h6 {
width: 30%; margin-bottom: 25px;
margin: 50px auto; font-size: 32px;
border-radius: 30px; color: #fff;
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;
}
} }
.input {
.main { position: relative;
width: 70%; width: 700px;
min-width: 920px;
padding: 40px;
margin: 0 auto; margin: 0 auto;
border-radius: 16px; }
background-color: #fdfdfd; img {
box-sizing: border-box; position: absolute;
.filter { top: 19px;
width: 100%; left: 14px;
margin-bottom: 10px; }
dl { input {
//display: flex; width: 100%;
line-height: 30px; height: 62px;
dt { line-height: 62px;
color: rgba(0, 0, 0, .85); padding: 0 50px;
font-size: 14px; font-size: 18px;
} color: #333;
border: 0;
dd { outline: none;
display: inline-flex; border-radius: 4px;
align-items: center; }
}
span { .wrap {
padding: 2px 10px; .filter {
margin: 0 10px; width: 100%;
color: rgba(0, 0, 0, .65); margin-bottom: 10px;
font-size: 14px; background-color: #fff;
dl {
cursor: pointer; display: flex;
line-height: 70px;
&:hover { dt {
color: #CC221C; color: #333;
} font-size: 16px;
font-weight: 600;
&.classification { }
border-radius: 4px; dd {
color: #fff; margin: 0 10px;
background-color: #CC221C; 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 { .title {
ul { margin: 10px 0 5px;
display: flex; color: #0B1D30;
flex-wrap: wrap; font-size: 16px;
word-wrap: break-word;
li { word-break: break-all;
width: 24%; overflow: hidden;
min-height: 250px; text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
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;
&.ie { .desc span {
height: 80px; color: #f00;
text-overflow: ellipsis; font-size: 14px;
white-space: nowrap; background-color: #f00;
} }
}
&:hover { .desc {
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); 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> <template>
<div class="wrap"> <div class="wrap index">
<div class="banner"> <div class="banner">
<h6>教育数字化产品开发者平台</h6> <h6>教育数字化产品开发者平台</h6>
<p class="text">与3000所高校共建数字化教育产业未来</p> <p class="text">与3000所高校共建数字化教育产业未来</p>

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

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

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

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

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

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

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

@ -1,4 +1,5 @@
@import "./default/index.scss"; @import "./default/index.scss";
@import "./var.scss";
@font-face { @font-face {
font-family: youshe; font-family: youshe;
@ -25,7 +26,28 @@
border-radius: 6px; border-radius: 6px;
background: rgba(142, 123, 253, .75); 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 { .p-title {
padding-left: 5px; padding-left: 5px;
margin-bottom: 24px; margin-bottom: 24px;
@ -126,42 +148,85 @@
.pagination { .pagination {
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
button,.number,.more,.el-input__inner{
button, .number { min-width: 32px !important;
color: rgba(0, 0, 0, .65) !important; height: 32px !important;
background-color: transparent !important; line-height: 32px;
border: 1px solid rgba(0, 0, 0, 0.15) !important; color: #333 !important;
border-radius: 4px !important; background-color: transparent !important;
border: 1px solid #ccc !important;
border-radius: 2px !important;
} }
button i{
button i { color: #333;
color: #333;
} }
.active{
.active { color: #fff !important;
color: #fff !important; background-color: $--color-primary !important;
background-color: $--color-primary !important;
} }
} }
.el-table { .el-table{
border-radius: 8px; border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.06); .cell{
border-bottom: 0; font-size: 12px;
.el-checkbox{
th { &:before{
background: $--color-primary !important; content: '全选';
margin-right: 5px;
.cell { color: #222326;
color: #fff; font-size: 12px;
font-size: 14px; opacity: 0;
font-weight: normal; }
.el-checkbox {
&:before {
opacity: 1;
}
} }
} }
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