|
|
@@ -0,0 +1,282 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <MHeader />
|
|
|
+ <div class="searchSection">
|
|
|
+ <div class="searchDate">
|
|
|
+ <div class="date startDate" @click="dateSection.status = true">
|
|
|
+ 开始<span>2020/03/03</span>
|
|
|
+ </div>-
|
|
|
+ <div class="date endDate" @click="dateSection.status = true">
|
|
|
+ 结束<span>2020/03/03</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="searchMore">
|
|
|
+ 筛选<i class="arrowDown"></i>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <van-dropdown-menu active-color="#14928A">
|
|
|
+ <van-dropdown-item title="筛选" ref="item">
|
|
|
+ <div class="dropItem">
|
|
|
+ <p class="dropTitle">评价类型</p>
|
|
|
+ <div class="radioGroup">
|
|
|
+ <span class="actived">月报</span>
|
|
|
+ <span>课次评价</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dropItem">
|
|
|
+ <p class="dropTitle">评价进度</p>
|
|
|
+ <div class="radioGroup">
|
|
|
+ <span class="actived">待完成</span>
|
|
|
+ <span>已完成</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dropItem">
|
|
|
+ <p class="dropTitle">提交作业</p>
|
|
|
+ <div class="radioGroup">
|
|
|
+ <span class="actived">是</span>
|
|
|
+ <span>否</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dropItem">
|
|
|
+ <p class="dropTitle">完成双向沟通</p>
|
|
|
+ <div class="radioGroup">
|
|
|
+ <span class="actived">是</span>
|
|
|
+ <span>否</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btnGroup">
|
|
|
+ <div class="btn btn-reset">重置</div>
|
|
|
+ <div class="btn btn-sure">确定</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </van-dropdown-item>
|
|
|
+ </van-dropdown-menu>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell v-for="i in 5" :key="i" class="cellGroup" title="3月25日" title-class="sectionTitle" value-class="sectionValue">
|
|
|
+ <template solt="default">
|
|
|
+ <p class="content van-ellipsis">长笛·王小明长笛·王小明长笛·王小明长笛·王小明</p>
|
|
|
+ <van-button type="primary" round size="small">提交评价</van-button>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ <!-- <m-empty class="empty" v-else key="data" /> -->
|
|
|
+
|
|
|
+ <!-- 日期弹窗 -->
|
|
|
+ <van-popup position="bottom" v-model="dateSection.status">
|
|
|
+ <van-datetime-picker
|
|
|
+ v-model="dateSection.currentDate"
|
|
|
+ type="date"
|
|
|
+ :min-date="dateSection.minDate"
|
|
|
+ :max-date="dateSection.maxDate"
|
|
|
+ :formatter="formatter" />
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <van-popup position="bottom" v-model="search.status">
|
|
|
+
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import MHeader from '@/components/MHeader'
|
|
|
+import MEmpty from '@/components/MEmpty'
|
|
|
+export default {
|
|
|
+ name: 'teacherList',
|
|
|
+ components: { MHeader, MEmpty },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dateSection: {
|
|
|
+ status: false,
|
|
|
+ minDate: new Date(2020, 0, 1),
|
|
|
+ maxDate: new Date(2025, 10, 1),
|
|
|
+ currentDate: new Date()
|
|
|
+ },
|
|
|
+ search: {
|
|
|
+ status: false
|
|
|
+ },
|
|
|
+ value: 0,
|
|
|
+ switch1: 1,
|
|
|
+ switch2: 2,
|
|
|
+ option: [
|
|
|
+ { text: '全部商品', value: 0 },
|
|
|
+ { text: '新款商品', value: 1 },
|
|
|
+ { text: '活动商品', value: 2 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.getStudent()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatter(type, val) {
|
|
|
+ if (type === 'year') {
|
|
|
+ return `${val}年`
|
|
|
+ } else if (type === 'month') {
|
|
|
+ return `${val}月`
|
|
|
+ } else if(type == 'day') {
|
|
|
+ return `${val}日`
|
|
|
+ }
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import url("../../assets/commonLess/variable.less");
|
|
|
+.searchSection {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: .15rem;
|
|
|
+ padding: 0 0.16rem;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .searchDate {
|
|
|
+ display: flex;
|
|
|
+ color: #666666;
|
|
|
+ height: auto;
|
|
|
+ .startDate {
|
|
|
+ margin-right: .05rem;
|
|
|
+ }
|
|
|
+ .endDate {
|
|
|
+ margin-left: .05rem;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ padding: .02rem .06rem;
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #999999;
|
|
|
+ span {
|
|
|
+ padding-left: .04rem;
|
|
|
+ font-size: .15rem;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.van-dropdown-menu__title {
|
|
|
+ font-size: .17rem;
|
|
|
+ color: #1A1A1A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnGroup {
|
|
|
+ display: flex;
|
|
|
+ margin-top: .15rem;
|
|
|
+ .btn {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: .17rem;
|
|
|
+ color: #000;
|
|
|
+ padding: .12rem 0;
|
|
|
+ }
|
|
|
+ .btn-reset {
|
|
|
+ background-color: #E1F6F4;
|
|
|
+ color: #14928A;
|
|
|
+ }
|
|
|
+ .btn-sure {
|
|
|
+ background-color: #14928A;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dropItem {
|
|
|
+ padding: .1rem .16rem;
|
|
|
+ .dropTitle {
|
|
|
+ font-size: .17rem;
|
|
|
+ color: #1A1A1A;
|
|
|
+ }
|
|
|
+ .radioGroup {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: .1rem;
|
|
|
+ span {
|
|
|
+ color: #000000;
|
|
|
+ background-color: #F4F4F4;
|
|
|
+ width: 48%;
|
|
|
+ padding: .1rem 0;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ &.actived {
|
|
|
+ color: #14928A;
|
|
|
+ background: url('../../assets/images/audition/icon_check.png') no-repeat bottom right #E4F6F5;
|
|
|
+ background-size: .2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.cellGroup {
|
|
|
+ padding: .16rem;
|
|
|
+}
|
|
|
+.sectionTitle {
|
|
|
+ font-size: .16rem;
|
|
|
+ color: #808080;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.sectionValue {
|
|
|
+ display: flex;
|
|
|
+ width: 70%;
|
|
|
+ flex: 1 auto;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: auto !important;
|
|
|
+ .content {
|
|
|
+ font-size: .17rem;
|
|
|
+ color: #1A1A1A;
|
|
|
+ }
|
|
|
+ .van-button {
|
|
|
+ font-size: .14rem;
|
|
|
+ background-color: #14928A;
|
|
|
+ padding: 0 .12rem;
|
|
|
+ min-width: .88rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/deep/.van-cell__title {
|
|
|
+ font-size: .14rem;
|
|
|
+ color: @mFontColor;
|
|
|
+ flex: 1 auto;
|
|
|
+}
|
|
|
+.logo {
|
|
|
+ width: .35rem;
|
|
|
+ height: .35rem;
|
|
|
+ margin-right: .12rem;
|
|
|
+ border-radius: 100%;
|
|
|
+}
|
|
|
+.input-cell {
|
|
|
+ padding: .12rem .16rem .2rem;
|
|
|
+ .van-radio {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.van-cell__value {
|
|
|
+ height: .2rem;
|
|
|
+}
|
|
|
+/deep/.van-radio__icon .van-icon {
|
|
|
+ border-color: @sFontColor;
|
|
|
+}
|
|
|
+/deep/.van-radio__icon--checked {
|
|
|
+ .van-icon {
|
|
|
+ border-color: @orangeColor;
|
|
|
+ background: @orangeColor;
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-tag {
|
|
|
+ margin-left: .08rem;
|
|
|
+}
|
|
|
+.button-group {
|
|
|
+ margin: .3rem .26rem .2rem;
|
|
|
+ .van-button--primary {
|
|
|
+ background: @mColor;
|
|
|
+ border: 1px solid @mColor;
|
|
|
+ font-size: .18rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
261568008@qq.com
