修改学期select框与间距样式

src/plugins/vant.js

@@ -22,7 +22,9 @@ import {
   SwipeCell,
   Search,
   Tab,
-  Tabs
+  Tabs,
+  Grid,
+  GridItem
 } from 'vant'
 Vue.use(Button)
   .use(Cell)
@@ -46,3 +48,5 @@ Vue.use(Button)
   .use(Search)
   .use(Tabs)
   .use(Tab)
+  .use(Grid)
+  .use(GridItem)

src/views/eva/components/bar.vue

@@ -50,7 +50,7 @@ export default {
 .bar {
   width: 100%;
   height: 50px;
-  z-index: 10;
+  z-index: 999;
   font-weight: 550;
   // background-color: #f9f9f9;
   display: flex;

src/views/eva/components/selectStyle.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="selcts" @click.stop="icoIsShow">
-    <!-- <div class="backPage" v-if="!ico" @click="fuClick1"></div> -->
+  <div class="selcts" @click="icoIsShow">
     <div style="flex: 1;">
       <div v-if="!choose.length" style="color: rgba(0, 0, 0, 0.40);">{{ tit }}</div>
       <div class="choosePerCon">
@@ -16,8 +15,8 @@
       <van-icon size="14px" :name="ico ? 'arrow-left' : 'arrow-down'" />
     </div>
 
-    <div class="list" v-if="!ico">
-      <div class="ol" v-for="(i, index) in listCont" :key="index + 'w'" @click="cho(i)">
+    <div class="list" v-if="ico">
+      <div class="ol" v-for="(i, index) in listCont" :key="index + 'w'" @click.stop="cho(i)">
         <div>
           {{ i.name }}
         </div>
@@ -47,7 +46,7 @@ export default {
   },
   data() {
     return {
-      ico: 1,
+      ico: false,
       txtColor: 'txtColor'
     }
   },
@@ -55,24 +54,22 @@ export default {
   methods: {
     // 判断弹出选项列表
     icoIsShow() {
-      this.ico = !this.ico
+      this.ico = true
+      this.$emit('shadeIsShow')
+    },
+    close() {
+      this.ico = false
     },
     // 判断学生是否被选中
     cho(e) {
       this.choose[0] = e.id
-      this.ico = 0
+      this.ico = false
       this.$emit('update-search', 'aaa')
-    },
+    }
     // 删除学生
     // delStu() {
     //   this.choose = ''
     // },
-
-    // 此方法在父元素中被调用
-    fuClick() {
-      // this.ico = 'false'
-      this.ico = !this.ico
-    }
     // fuClick1() {
     //   this.ico = !this.ico
     // }
@@ -84,21 +81,13 @@ export default {
 .txtColor {
   color: blue;
 }
-.backPage {
-  background-color: aquamarine;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  // z-index: 200;
-}
+
 .selcts {
   position: relative;
   display: flex;
   box-sizing: border-box;
   padding-right: 15px;
-  font-size: 12px;
+  font-size: 14px;
   width: 120px;
   .ico {
     width: 10px;
@@ -114,9 +103,9 @@ export default {
     max-height: 220px;
     overflow-y: scroll;
     background-color: #fff;
-    width: 100%;
+    width: 150px;
     box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
-    z-index: 10;
+    z-index: 200;
     border-radius: 8px;
     .ol {
       height: 40px;
@@ -135,7 +124,6 @@ export default {
   }
   .choosePerCon {
     height: 100%;
-    // flex: 1;
     display: flex;
     align-items: center;
     flex-wrap: wrap;

src/views/eva/components/selects.vue

@@ -20,7 +20,7 @@
     </div>
 
     <div class="list" v-if="!ico">
-      <div class="ol" v-for="(i, index) in listContent" :key="index + 'w'" @click.stop="choose(i)">
+      <div class="ol" v-for="(i, index) in listContent" :key="index + 'w'" @click="choose(i)">
         <div :style="{ color: choosePer.includes(i.id) ? 'blue' : '' }">
           {{ i.name }}
         </div>

src/views/eva/searchStudentEva.vue

@@ -118,8 +118,8 @@
     <!-- 按钮 -->
     <div class="submitBtn">
       <!-- <div class="btn" @click="isShowMask = true">删除</div> -->
-      <div class="btn" @click="isShowMask = true">重复添加</div>
-      <div class="btn">添加新记录</div>
+      <!-- <div class="btn" @click="isShowMask = true">重复添加</div>
+      <div class="btn">添加新记录</div> -->
       <div class="btn" v-if="!shareShow" @click="save">保存并返回</div>
       <div class="btn" v-else @click="amend">修改并返回</div>
     </div>

src/views/eva/searchstuDetail.vue

@@ -10,9 +10,11 @@
           <div class="userName">{{ studentInfo.name }}</div>
         </div>
         <div class="cla">{{ studentInfo.cname }}</div>
+        <div class="backPage" v-if="isSelectShow" @click="fuClick1"></div>
 
         <selectStyle
           ref="claSel"
+          @shadeIsShow="shadeIsShow"
           @update-search="handleUpdateSearch"
           :listCont="termList"
           :tit="'请选择学期'"
@@ -21,13 +23,6 @@
 
         <div class="dataNum">本学期共计{{ TermRecord.length }} 条记录</div>
       </div>
-
-      <!-- <div class="rig">
-        <div class="topBtnS">
-          <div></div>
-          <div></div>
-        </div>
-      </div> -->
     </div>
     <!-- 顶部学生信息结束 -->
 
@@ -41,19 +36,21 @@
         <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" />
       </div>
       <div class="observe_box">
-        <!-- <div class="observe_boxTit">筛选框</div> -->
-        <div class="observe_boxSelect">
-          <!-- <div class="observe_boxCon" style="display: inline-block;" @click="addFil('')">全部</div> -->
-          <div
-            class="observe_boxCon"
-            v-for="(i, index) in filtrate"
-            @click="addFil(i.id, index)"
-            :class="{ active: activeItem === index }"
-            :key="index"
-          >
+        <div
+          class="observe_boxCon"
+          v-for="(i, index) in filtrate"
+          @click="addFil(i.id, index)"
+          :class="{ active: activeItem === index }"
+          :key="index"
+          @touchstart="touchStart(index)"
+          @touchend="touchend(index)"
+        >
+          <div class="txt">{{ i.name }}</div>
+          <div ref="loop" class="loopList">
             {{ i.name }}
           </div>
         </div>
+        <!-- </div> -->
       </div>
       <!-- 观察内容开始 -->
       <van-swipe-cell v-show="conList.length" v-for="(i, index) in conList" :key="index">
@@ -130,6 +127,8 @@ export default {
   },
   data() {
     return {
+      // 遮罩层
+      isSelectShow: false,
       activeItem: null,
       // 观察记录数组
       conList: [],
@@ -160,6 +159,23 @@ export default {
     }
   },
   methods: {
+    touchStart(e) {
+      // console.log(this.$refs.loop[e])
+      setTimeout(() => {
+        const target = this.$refs.loop[e]
+        target.style.display = 'block'
+        if (e % 4 !== 0) {
+          console.log(0)
+          target.style.right = '0'
+        }
+      }, 500)
+    },
+    touchend(e) {
+      setTimeout(() => {
+        const target = this.$refs.loop[e]
+        target.style.display = 'none'
+      }, 1000)
+    },
     // 获取基础数据
     getData() {
       // 获取学生信息
@@ -259,6 +275,14 @@ export default {
         this.conList = res[0]
       })
     },
+    fuClick1() {
+      this.isSelectShow = false
+      this.$refs.claSel.close()
+    },
+    shadeIsShow() {
+      console.log(11111)
+      this.isSelectShow = true
+    },
     // 获取学期学生记录
     getTermRecord() {
       const data4 = {
@@ -274,7 +298,9 @@ export default {
     },
     // 子组件调用父组件方法
     handleUpdateSearch(e) {
-      console.log(e)
+      this.isSelectShow = false
+
+      // console.log(e)
       // 获取筛选学期所有学生记录
       const data4 = {
         uid: this.stuId,
@@ -314,7 +340,34 @@ export default {
   margin: 0;
   background-color: #fff;
 }
-
+.loopList {
+  height: 20px;
+  line-height: 20px;
+  display: none;
+  position: absolute;
+  // min-width: 120px;
+  text-wrap: nowrap;
+  font-size: 12px;
+  border-radius: 5px;
+  padding: 0 5px;
+  background-color: #309cd6;
+  top: -80%;
+  color: #fff;
+  // left: 0;
+  // right: 0;
+}
+.loopList:nth-child(4n) {
+  background-color: #e0eafb;
+}
+.backPage {
+  // background-color: aquamarine;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60vh;
+  z-index: 99;
+}
 .delete-button {
   height: 100%;
 }
@@ -431,7 +484,7 @@ export default {
       .cla {
         height: 20px;
         line-height: 30px;
-        font-size: 10px;
+        font-size: 12px;
         color: #ffffff;
       }
       .dataNum {
@@ -486,6 +539,10 @@ export default {
     // border: 1px solid rgba(187, 187, 187, 1);
     box-sizing: border-box;
     padding: 0 10px;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
     .observe_boxTit {
       width: 84px;
       height: 29px;
@@ -496,32 +553,45 @@ export default {
       font-family: PingFangSC-regular;
       margin-bottom: 5px;
     }
-    .observe_boxSelect {
-      width: 100%;
-      display: flex;
-      // justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      .observe_boxCon {
-        width: 74.46px;
-        height: 30px;
-        line-height: 30px;
-        border-radius: 4px;
-        background-color: #fff;
-        color: rgba(153, 152, 152, 1);
-        font-size: 12px;
-        text-align: center;
-        font-family: Roboto;
-        border: 1px solid rgba(231, 231, 231, 1);
-        margin-bottom: 8px;
-        margin-right: 10px;
-      }
-      .active {
-        background-color: #e0eafb;
-        color: #0061ff;
+    .observe_boxCon {
+      position: relative;
+      width: calc((100% - 60px) / 4);
+      height: 30px;
+      line-height: 30px;
+      border-radius: 4px;
+      background-color: #fff;
+      color: rgba(153, 152, 152, 1);
+      font-size: 12px;
+      text-align: center;
+      // overflow: hidden;
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
+      font-family: Roboto;
+      border: 1px solid rgba(231, 231, 231, 1);
+      margin-bottom: 8px;
+      margin-right: 5%;
+      .txt {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
-      //   height: 100%;
     }
+    .observe_boxCon:nth-child(4n) {
+      margin-right: 0;
+    }
+    .active {
+      background-color: #e0eafb;
+      color: #0061ff;
+    }
+    // .observe_boxSelect {
+    //   width: 100%;
+    //   display: flex;
+    //   justify-content: flex-start;
+    //   align-items: center;
+    //   flex-wrap: wrap;
+
+    //   //   height: 100%;
+    // }
   }
   //   观察记录结束
 

src/views/eva/studentDetail.vue

@@ -4,15 +4,19 @@
     <bar :tit="'学生记录'" :backPage="1"></bar>
     <div style="height: 50px;"></div>
     <!-- 顶部学生信息开始 -->
+
     <div class="top">
       <div class="UserInfo" style="flex: 1;">
         <div class="sInfo">
           <div class="userName">{{ studentInfo.name }}</div>
         </div>
         <div class="cla">{{ studentInfo.cname }}</div>
+        <!-- <div class="shade"></div> -->
+        <div class="backPage" v-if="isSelectShow" @click="fuClick1"></div>
 
         <selectStyle
           ref="claSel"
+          @shadeIsShow="shadeIsShow"
           @update-search="handleUpdateSearch"
           :listCont="termList"
           :tit="'请选择学期'"
@@ -52,18 +56,23 @@
       </div>
       <div class="observe_box">
         <!-- <div class="observe_boxTit">筛选框</div> -->
-        <div class="observe_boxSelect">
-          <!-- <div class="observe_boxCon" style="display: inline-block;" @click="addFil('')">全部</div> -->
-          <div
-            class="observe_boxCon"
-            v-for="(i, index) in filtrate"
-            @click="addFil(i.id, index)"
-            :class="{ active: activeItem === index }"
-            :key="index"
-          >
+        <!-- <div class="observe_boxSelect"> -->
+        <!-- <div class="observe_boxCon" style="display: inline-block;" @click="addFil('')">全部</div> -->
+        <div
+          class="observe_boxCon"
+          v-for="(i, index) in filtrate"
+          @click="addFil(i.id, index)"
+          :class="{ active: activeItem === index }"
+          :key="index"
+          @touchstart="touchStart(index)"
+          @touchend="touchend(index)"
+        >
+          <div class="txt">{{ i.name }}</div>
+          <div ref="loop" class="loopList">
             {{ i.name }}
           </div>
         </div>
+        <!-- </div> -->
       </div>
       <!-- 观察内容开始 -->
       <van-swipe-cell v-show="conList.length" v-for="(i, index) in conList" :key="index">
@@ -139,6 +148,9 @@ export default {
   },
   data() {
     return {
+      // 遮罩层
+      isSelectShow: false,
+
       activeItem: null,
       // 观察记录数组
       conList: [],
@@ -170,6 +182,22 @@ export default {
     }
   },
   methods: {
+    touchStart(e) {
+      setTimeout(() => {
+        const target = this.$refs.loop[e]
+        target.style.display = 'block'
+        if (e % 4 !== 0) {
+          console.log(0)
+          target.style.right = '0'
+        }
+      }, 500)
+    },
+    touchend(e) {
+      setTimeout(() => {
+        const target = this.$refs.loop[e]
+        target.style.display = 'none'
+      }, 1000)
+    },
     // 获取基础数据
     getData() {
       // 获取班学生列表
@@ -337,6 +365,10 @@ export default {
         this.conList = res[0]
       })
     },
+    fuClick1() {
+      this.isSelectShow = false
+      this.$refs.claSel.close()
+    },
 
     getTermRecord() {
       // 获取所有学生记录
@@ -345,14 +377,20 @@ export default {
         trm: this.termData[0],
         txt: ''
       }
-      console.log(' 获取所有学生记录aaaaaaaaaaaaaaaaaaaaaaa', data4)
+      // console.log(' 获取所有学生记录aaaaaaaaaaaaaaaaaaaaaaa', data4)
       selectRecord(data4).then(res => {
         console.log('获取所有学生记录', res)
         this.TermRecord = res[0]
       })
     },
+    shadeIsShow() {
+      this.isSelectShow = true
+    },
     handleUpdateSearch(e) {
-      console.log(e)
+      // console.log('前', this.isSelectShow)
+      this.isSelectShow = false
+      // console.log('后', this.isSelectShow)
+      // console.log(e)
       // 获取筛选学期所有学生记录
       const data4 = {
         uid: this.stuId,
@@ -376,24 +414,48 @@ export default {
     }
   },
   created() {
-    // this.getStuList()
     this.stuId = localStorage.getItem('userId')
-    // console.log('localStorage', localStorage.getItem('userId'))
     this.selTerm()
-
-    console.log('this.$route.query', this.$route.query)
-    // console.log('state', this.$store.state)
-    // console.log(this.$route.query.cid)
+    // console.log('this.$route.query', this.$route.query)
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.loopList {
+  height: 20px;
+  line-height: 20px;
+  display: none;
+  position: absolute;
+  // min-width: 120px;
+  text-wrap: nowrap;
+  font-size: 12px;
+  border-radius: 5px;
+  padding: 0 5px;
+  background-color: #309cd6;
+  top: -80%;
+  color: #fff;
+  // left: 0;
+}
 .goods-card {
   margin: 0;
   background-color: #fff;
 }
-
+.backPage {
+  // background-color: aquamarine;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60vh;
+  z-index: 99;
+}
+// .shade {
+//   background-color: #005ccd;
+//   position: absolute;
+//   width: 100%;
+//   height: 100vh;
+// }
 .delete-button {
   height: 100%;
 }
@@ -515,7 +577,7 @@ export default {
         text-overflow: ellipsis;
         height: 20px;
         line-height: 30px;
-        font-size: 10px;
+        font-size: 12px;
         color: #ffffff;
       }
       .dataNum {
@@ -570,6 +632,9 @@ export default {
     // border: 1px solid rgba(187, 187, 187, 1);
     box-sizing: border-box;
     padding: 0 10px;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
     .observe_boxTit {
       width: 84px;
       height: 29px;
@@ -580,32 +645,43 @@ export default {
       font-family: PingFangSC-regular;
       margin-bottom: 5px;
     }
-    .observe_boxSelect {
-      width: 100%;
-      display: flex;
-      // justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      .observe_boxCon {
-        width: 74.46px;
-        height: 30px;
-        line-height: 30px;
-        border-radius: 4px;
-        background-color: #fff;
-        color: rgba(153, 152, 152, 1);
-        font-size: 12px;
-        text-align: center;
-        font-family: Roboto;
-        border: 1px solid rgba(231, 231, 231, 1);
-        margin-bottom: 8px;
-        margin-right: 10px;
-      }
-      .active {
-        background-color: #e0eafb;
-        color: #0061ff;
+    .observe_boxCon {
+      position: relative;
+      width: calc((100% - 60px) / 4);
+      height: 30px;
+      line-height: 30px;
+      border-radius: 4px;
+      background-color: #fff;
+      color: rgba(153, 152, 152, 1);
+      font-size: 12px;
+
+      text-align: center;
+      font-family: Roboto;
+      border: 1px solid rgba(231, 231, 231, 1);
+      margin-bottom: 8px;
+      margin-right: 5%;
+      .txt {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
-      //   height: 100%;
     }
+    .observe_boxCon:nth-child(4n) {
+      margin-right: 0;
+    }
+    .active {
+      background-color: #e0eafb;
+      color: #0061ff;
+    }
+    // .observe_boxSelect {
+    //   width: 100%;
+    //   display: flex;
+    //   justify-content: space-between;
+    //   align-items: center;
+    //   flex-wrap: wrap;
+
+    //   //   height: 100%;
+    // }
   }
   //   观察记录结束
 

src/views/eva/studentEvaluate.vue

@@ -118,8 +118,8 @@
     <!-- 按钮 -->
     <div class="submitBtn">
       <!-- <div class="btn" @click="isShowMask = true">删除</div> -->
-      <div class="btn" @click="isShowMask = true">重复添加</div>
-      <div class="btn">添加新记录</div>
+      <!-- <div class="btn" @click="isShowMask = true">重复添加</div>
+      <div class="btn">添加新记录</div> -->
       <div class="btn" v-if="!shareShow" @click="save">保存并返回</div>
       <div class="btn" v-else @click="amend">修改并返回</div>
     </div>