|
@@ -1,221 +1,222 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <el-dialog title="" class="sss" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
|
|
|
|
|
- <div :class="[{'newStudentContainer1':bg == 0},{'newStudentContainer2':bg != 0}]">
|
|
|
|
|
- <div class="info">
|
|
|
|
|
- <span v-for="(s,i) in studentInfo.Rs" v-if="i < 8">{{s.Name}}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="studentTips">
|
|
|
|
|
|
|
+ <el-dialog title="" class="sss" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
|
|
|
|
|
+ <div :class="[{'newStudentContainer1':bg == 0},{'newStudentContainer2':bg != 0}]">
|
|
|
|
|
+ <div class="info">
|
|
|
|
|
+ <span v-for="(s,i) in studentInfo.Rs" v-if="i < 8">{{ s.Name }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="studentTips">
|
|
|
<span>
|
|
<span>
|
|
|
欢迎新学员加入英泓小飞龙俱乐部
|
|
欢迎新学员加入英泓小飞龙俱乐部
|
|
|
</span>
|
|
</span>
|
|
|
- <span>
|
|
|
|
|
|
|
+ <span>
|
|
|
欢迎入伙,以后你就是英泓小飞龙俱乐部的人啦,<i style="color: red">❤</i>!
|
|
欢迎入伙,以后你就是英泓小飞龙俱乐部的人啦,<i style="color: red">❤</i>!
|
|
|
</span>
|
|
</span>
|
|
|
- </div>
|
|
|
|
|
- <div class="progress">
|
|
|
|
|
- <el-progress :percentage="studentInfo.percent" :show-text="false"></el-progress>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <img class="long" src="../static/img/newStudent/long.png" alt="">
|
|
|
|
|
- </el-dialog>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="progress">
|
|
|
|
|
+ <el-progress :percentage="studentInfo.percent" :show-text="false"></el-progress>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <img class="long" src="../static/img/newStudent/long.png" alt="">
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- export default {
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- percent: 0,
|
|
|
|
|
- totalTime: 0,
|
|
|
|
|
- sumTime: 4,
|
|
|
|
|
- bg: 0,
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
- props: ['studentInfo'],
|
|
|
|
|
- watch: {
|
|
|
|
|
- studentInfo: {
|
|
|
|
|
- handler(newName, oldName) {
|
|
|
|
|
- let that = this;
|
|
|
|
|
- if (newName != '') {
|
|
|
|
|
- if (Math.random(1,10)*100 > 50) {
|
|
|
|
|
- that.bg = 0
|
|
|
|
|
- }else{
|
|
|
|
|
- that.bg = 1
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- deep: true,
|
|
|
|
|
- immediate: true
|
|
|
|
|
- }
|
|
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ percent: 0,
|
|
|
|
|
+ totalTime: 0,
|
|
|
|
|
+ sumTime: 4,
|
|
|
|
|
+ bg: 0,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ props: ['studentInfo'],
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ studentInfo: {
|
|
|
|
|
+ handler(newName, oldName) {
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+ if (newName != '') {
|
|
|
|
|
+ if (Math.random(1, 10) * 100 > 50) {
|
|
|
|
|
+ that.bg = 0
|
|
|
|
|
+ } else {
|
|
|
|
|
+ that.bg = 1
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ },
|
|
|
|
|
+ deep: true,
|
|
|
|
|
+ immediate: true
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
- /*成就彩蛋*/
|
|
|
|
|
- /deep/ .el-dialog {
|
|
|
|
|
- width: 80%;
|
|
|
|
|
- height: 6rem;
|
|
|
|
|
- background: none;
|
|
|
|
|
- /*background: url("../static/img/newStudent/newStudent1.png");*/
|
|
|
|
|
- /*background-position: top center;*/
|
|
|
|
|
- /*background-repeat: no-repeat;*/
|
|
|
|
|
- /*background-size: 100% 100%;*/
|
|
|
|
|
- box-shadow: none;
|
|
|
|
|
- border: none;
|
|
|
|
|
- padding-bottom: 1rem;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /deep/ .el-dialog__header {
|
|
|
|
|
- display: none;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .newStudentContainer1 {
|
|
|
|
|
- height: 6rem;
|
|
|
|
|
- margin-top: 0;
|
|
|
|
|
- background: url("../static/img/newStudent/newStudent1.png");
|
|
|
|
|
- background-position: top center;
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .newStudentContainer2 {
|
|
|
|
|
- height: 6rem;
|
|
|
|
|
- margin-top: 0;
|
|
|
|
|
- background: url("../static/img/newStudent/newStudent2.png");
|
|
|
|
|
- background-position: top center;
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info .lt {
|
|
|
|
|
- width: 50%;
|
|
|
|
|
- height: 4rem;
|
|
|
|
|
- float: left;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info .rt {
|
|
|
|
|
- width: 50%;
|
|
|
|
|
- height: 4rem;
|
|
|
|
|
- float: left;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info h5 {
|
|
|
|
|
- width: 4rem;
|
|
|
|
|
- height: 0.6rem;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- display: block;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- background: url("../static/img/newRecord/record_title.png");
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- background-size: 100%;
|
|
|
|
|
- background-position: top center;
|
|
|
|
|
- font-family: vista;
|
|
|
|
|
- font-weight: normal;
|
|
|
|
|
- font-size: 0.3rem;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 0.6rem;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info .detail {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- display: block;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .detail em {
|
|
|
|
|
- font-size: 1.8rem;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-style: normal;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .detail span {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-size: 0.6rem;
|
|
|
|
|
- font-family: vista;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info img {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- width: 2rem;
|
|
|
|
|
- height: 2rem;
|
|
|
|
|
- float: left;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- bottom: 1rem;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info {
|
|
|
|
|
- width: 50%;
|
|
|
|
|
- height: 2rem;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- padding-top: 2.9rem;
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- /*justify-content: space-between;*/
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info span {
|
|
|
|
|
- font-weight: 900;
|
|
|
|
|
- font-size: 0.4rem;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- color: #FDED2E;
|
|
|
|
|
- text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.38);
|
|
|
|
|
- /*margin-right: 1rem;*/
|
|
|
|
|
- padding-left: 0.1rem;
|
|
|
|
|
- padding-right: 0.1rem;
|
|
|
|
|
- padding-bottom: 0rem;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .studentTips {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- display: block;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .studentTips span {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 0.3rem;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- padding-top: 0.1rem;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- font-size: 0.3rem;
|
|
|
|
|
- color: #000;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .progress {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- top: 0.1rem;
|
|
|
|
|
- width: 94%;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- display: block;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /deep/ .el-progress-bar .el-progress-bar__outer {
|
|
|
|
|
- height: 0.4rem;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /deep/ .el-progress-bar__inner {
|
|
|
|
|
- background-color: #FFEE00;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .long {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- float: right;
|
|
|
|
|
- bottom: 1.8rem;
|
|
|
|
|
- right: -0.5rem;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+/*成就彩蛋*/
|
|
|
|
|
+/deep/ .el-dialog {
|
|
|
|
|
+ width: 80%;
|
|
|
|
|
+ height: 6rem;
|
|
|
|
|
+ background: none;
|
|
|
|
|
+ /*background: url("../static/img/newStudent/newStudent1.png");*/
|
|
|
|
|
+ /*background-position: top center;*/
|
|
|
|
|
+ /*background-repeat: no-repeat;*/
|
|
|
|
|
+ /*background-size: 100% 100%;*/
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding-bottom: 1rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/deep/ .el-dialog__header {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.newStudentContainer1 {
|
|
|
|
|
+ height: 6rem;
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
|
+ background: url("../static/img/newStudent/newStudent1.png");
|
|
|
|
|
+ background-position: top center;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.newStudentContainer2 {
|
|
|
|
|
+ height: 6rem;
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
|
+ background: url("../static/img/newStudent/newStudent2.png");
|
|
|
|
|
+ background-position: top center;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info .lt {
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ height: 4rem;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info .rt {
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ height: 4rem;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info h5 {
|
|
|
|
|
+ width: 4rem;
|
|
|
|
|
+ height: 0.6rem;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ background: url("../static/img/newRecord/record_title.png");
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-size: 100%;
|
|
|
|
|
+ background-position: top center;
|
|
|
|
|
+ font-family: vista;
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ font-size: 0.3rem;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 0.6rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info .detail {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.detail em {
|
|
|
|
|
+ font-size: 1.8rem;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-style: normal;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.detail span {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 0.6rem;
|
|
|
|
|
+ font-family: vista;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info img {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 2rem;
|
|
|
|
|
+ height: 2rem;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ bottom: 1rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info {
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ height: 2rem;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ padding-top: 2.9rem;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ /*justify-content: space-between;*/
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info span {
|
|
|
|
|
+ font-weight: 900;
|
|
|
|
|
+ font-size: 0.4rem;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: #FDED2E;
|
|
|
|
|
+ text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.38);
|
|
|
|
|
+ /*margin-right: 1rem;*/
|
|
|
|
|
+ padding-left: 0.1rem;
|
|
|
|
|
+ padding-right: 0.1rem;
|
|
|
|
|
+ padding-bottom: 0rem;
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.studentTips {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.studentTips span {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 0.3rem;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ padding-top: 0.1rem;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 0.3rem;
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.progress {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ top: 0.1rem;
|
|
|
|
|
+ width: 94%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/deep/ .el-progress-bar .el-progress-bar__outer {
|
|
|
|
|
+ height: 0.4rem;
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/deep/ .el-progress-bar__inner {
|
|
|
|
|
+ background-color: #FFEE00;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.long {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ bottom: 1.6rem;
|
|
|
|
|
+ right: -0.5rem;
|
|
|
|
|
+ width: 1.5rem;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|