|
@@ -68,11 +68,11 @@
|
|
|
<el-image :src="logoImg" fit="cover" v-if="typeselect ===0" class="logoImg" />
|
|
|
<div class="pathtext" v-else>
|
|
|
<span @click="typeselect=0">根据学区选择</span>/
|
|
|
- <span>智慧教育学区</span>
|
|
|
+ <span @click="typeselect=1">智慧教育学区</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="type-select-content">
|
|
|
- <!--选择根据学区-->
|
|
|
+ <!--选择根据学区or学校-->
|
|
|
<div class="type-list" v-if="typeselect ===0">
|
|
|
<div class="itemtype" @click="typeselect=1">
|
|
|
<svg class="select-icon" aria-hidden="true">
|
|
@@ -85,7 +85,7 @@
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="itemtype" @click="typeselect=1">
|
|
|
+ <div class="itemtype" @click="typeselect=3">
|
|
|
<svg class="select-icon" aria-hidden="true">
|
|
|
<use xlink:href="#icon-xuexiao7"></use>
|
|
|
</svg>
|
|
@@ -98,7 +98,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--选择根据学区end-->
|
|
|
- <!--学区选择列表-->
|
|
|
+ <!--学区选择列表(学区)-->
|
|
|
<div class="type-list" v-else-if="typeselect ===1">
|
|
|
<el-checkbox-group v-model="checkList">
|
|
|
<div class="itemtype-area">
|
|
@@ -121,8 +121,8 @@
|
|
|
</div>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
- <!--学区选择列表end-->
|
|
|
- <!--学校选择列表-->
|
|
|
+ <!--学区选择列表(学区)end-->
|
|
|
+ <!--学校选择列表(学区)-->
|
|
|
<div class="type-list" v-else-if="typeselect ===2">
|
|
|
<el-checkbox-group v-model="checkList">
|
|
|
<div class="itemtype-area">
|
|
@@ -145,11 +145,79 @@
|
|
|
</div>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
- <!--学小选择列表end-->
|
|
|
+ <!--学小选择列表(学区)end-->
|
|
|
+ <!--从学校选择(学校)-->
|
|
|
+ <div class="type-list" v-else-if="typeselect ===3">
|
|
|
+ <div class="serachbox">
|
|
|
+ <el-input v-model="input2" placeholder="输入学校名称/简码 搜索" size="small">
|
|
|
+ <template #append>
|
|
|
+ <el-icon @click="searchSchool">
|
|
|
+ <Search />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="成都银都紫藤小学" />
|
|
|
+ <div class="next-icon" @click="typeselect=4">
|
|
|
+ 下级
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="成都师范小学" />
|
|
|
+ <div class="next-icon" @click="typeselect=4">
|
|
|
+ 下级
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <!--从学校选择(学校)end-->
|
|
|
+ <div class="type-list" v-else-if="typeselect ===4">
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="张云迪-(语文)" />
|
|
|
+ </div>
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="李XX-(数学)" />
|
|
|
+ </div>
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="王XX-(历史)" />
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<i class="line-type"></i>
|
|
|
- <div class="serach-select">搜索选人</div>
|
|
|
+ <div class="serach-select">
|
|
|
+ <div class="serachbox-school">
|
|
|
+ <el-input v-model="input2" placeholder="输入学校名称/简码 搜索" size="small">
|
|
|
+ <template #append>
|
|
|
+ <el-icon @click="searchSchool">
|
|
|
+ <Search />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="search-result">
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <div class="result-item">
|
|
|
+ <el-checkbox />
|
|
|
+ <div class="item-img">
|
|
|
+ <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.3png.com%2Fa1f25b608d48b6c7e98f68d333b46e1de09d.png&refer=http%3A%2F%2Fimg2.3png.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671269166&t=8acdd73c91ccd84dd1057a736c514d7e" />
|
|
|
+ </div>
|
|
|
+ <div class="item-name">张XX</div>
|
|
|
+ <div class="item-school">成都银都紫藤小学</div>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<i class="line"></i>
|
|
@@ -157,6 +225,10 @@
|
|
|
<p class="candidate-hint">接收人群</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="guidebox">
|
|
|
+ <el-button @click="active=0">上一步</el-button>
|
|
|
+ <el-button type="primary" @click="active=2">下一步</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -164,7 +236,7 @@
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { ref, getCurrentInstance, defineProps, watch, defineExpose, onMounted, } from 'vue'
|
|
|
-import { ArrowRight } from '@element-plus/icons-vue'
|
|
|
+import { ArrowRight, Search } from '@element-plus/icons-vue'
|
|
|
import zhCn from "element-plus/lib/locale/lang/zh-cn";
|
|
|
let locale = zhCn
|
|
|
let logoImg = require('@/assets/img/logox.png')
|
|
@@ -333,6 +405,9 @@ const options = [
|
|
|
function timechange (val) {
|
|
|
console.log(val)
|
|
|
}
|
|
|
+function searchSchool () {
|
|
|
+ alert('11111')
|
|
|
+}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.createdpush {
|
|
@@ -356,6 +431,7 @@ function timechange (val) {
|
|
|
}
|
|
|
.stepsshow {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
padding: 1%;
|
|
|
width: 80%;
|
|
@@ -363,7 +439,7 @@ function timechange (val) {
|
|
|
margin: 0 auto;
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 5px;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: start;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
.stepsbox {
|
|
@@ -374,6 +450,7 @@ function timechange (val) {
|
|
|
.created-one {
|
|
|
width: 45%;
|
|
|
height: 60vh;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
.created-two {
|
|
|
width: 100%;
|
|
@@ -507,6 +584,71 @@ function timechange (val) {
|
|
|
.pathtext span:hover {
|
|
|
color: #0984e3;
|
|
|
}
|
|
|
+.serachbox {
|
|
|
+ width: 100%;
|
|
|
+ padding: 1%;
|
|
|
+}
|
|
|
+.serachbox-school {
|
|
|
+ width: 100%;
|
|
|
+ padding: 5px 5px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+}
|
|
|
+.serach-select {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.search-result {
|
|
|
+ height: 48.5vh;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.result-item {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: start;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 1%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding-left: 3%;
|
|
|
+}
|
|
|
+.result-item:nth-child(1) {
|
|
|
+ margin-top: 1%;
|
|
|
+}
|
|
|
+.item-img {
|
|
|
+ width: 25%;
|
|
|
+}
|
|
|
+.item-img img {
|
|
|
+ /* width: auto;
|
|
|
+ height: auto;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%; */
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.item-name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 45%;
|
|
|
+}
|
|
|
+.item-school {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b2bec3;
|
|
|
+ width: 25%;
|
|
|
+ line-height: 16px;
|
|
|
+}
|
|
|
+.result-item:hover {
|
|
|
+ background-color: #ecf0f1;
|
|
|
+}
|
|
|
+.guidebox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 2%;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.skip-switch .el-form-item__content {
|
|
@@ -521,6 +663,9 @@ function timechange (val) {
|
|
|
.next button {
|
|
|
padding: 1% 15%;
|
|
|
}
|
|
|
+.guidebox button {
|
|
|
+ padding: 1% 5%;
|
|
|
+}
|
|
|
.stepsbox .is-process {
|
|
|
color: #0984e3 !important;
|
|
|
border-color: #0984e3 !important;
|
|
@@ -539,4 +684,8 @@ function timechange (val) {
|
|
|
height: 30px;
|
|
|
margin-bottom: 0px;
|
|
|
}
|
|
|
+.result-item .is-checked,
|
|
|
+.result-item .el-checkbox {
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
</style>
|