修改样式

src/views/eva/studentDetail.vue

@@ -15,11 +15,12 @@
           </van-dropdown-menu> -->
           <div class="userName" @click="cutStuShowBtn">
             {{ studentInfo.name }}
-            <van-icon
-              style="position: absolute;right: 0;top: 50%; transform: translate(0,-50%);"
-              size="14px"
-              :name="cutListShow ? 'arrow-left' : 'arrow-down'"
+            <img
+              style="position: absolute;right: 0px;top: 50%;width: 25px; transform: translate(0,-50%);"
+              src="../../assets/images/eva/arrow.png"
+              alt=""
             />
+            <!-- <van-icon size="14px" :name="cutListShow ? 'arrow-left' : 'arrow-down'" /> -->
           </div>
 
           <div class="sInfoList" v-if="cutListShow">
@@ -46,31 +47,27 @@
         <!-- 遮罩层 -->
         <div class="backPage" v-if="isSelectShow" @click="fuClick1"></div>
 
-        <selectStyle
+        <!-- <selectStyle
           ref="claSel"
           @shadeIsShow="shadeIsShow"
           @update-search="handleUpdateSearch"
           :listCont="termList"
           :tit="'请选择学期'"
           :choose="termData"
-        ></selectStyle>
-
-        <div class="dataNum">本学期共计{{ conList.length }} 条记录</div>
+        ></selectStyle> -->
       </div>
 
-      <div class="rig">
+      <div class="rig" v-if="!cutListShow">
         <div class="topBtnS" v-if="this.stuList.length">
           <div>
-            <img class="img" v-if="num" @click="upStu" src="../../assets/images/eva/lefttt.png" alt="" />
+            <div class="btnBack" v-if="num" @click="upStu">
+              <img class="img" src="../../assets/images/eva/zuo01.png" alt="" />
+            </div>
           </div>
           <div>
-            <img
-              class="img"
-              v-if="num != stuList.length - 1"
-              @click="nextStu"
-              src="../../assets/images/eva/rightttt.png"
-              alt=""
-            />
+            <div class="btnBack" v-if="num != stuList.length - 1" @click="nextStu">
+              <img class="img" src="../../assets/images/eva/you02.png" alt="" />
+            </div>
           </div>
         </div>
       </div>
@@ -82,19 +79,15 @@
       <div class="observe_tit">
         <div class="left">
           <img class="img" src="../../assets/images/eva/Frame (4).png" alt="" />
-          <div>观察记录</div>
+          <div><span style="margin-right: 5px;">观察记录</span>({{ conList.length }})</div>
         </div>
         <div class="weiSelectCss">
-          <!-- <selectStyle
-            ref="weiSel"
-            @shadeIsShow="shadeIsShow"
-            @update-search="handleUpdateSearch"
-            :listCont="filtrate"
-            :tit="'请选择纬度'"
-            :choose="filtrateData"
-          ></selectStyle> -->
           <van-dropdown-menu>
-            <van-dropdown-item @change="handleUpdateSearch" v-model="filtrateData" :options="filtrate" />
+            <van-dropdown-item @change="handleUpdateSearch" v-model="filtrateData" title="维度" :options="filtrate" />
+          </van-dropdown-menu>
+
+          <van-dropdown-menu>
+            <van-dropdown-item @change="handleUpdateSearch" v-model="termId" title="学期" :options="termList" />
           </van-dropdown-menu>
 
           <!-- <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" /> -->
@@ -197,8 +190,6 @@ export default {
       // 遮罩层
       isSelectShow: false,
 
-      termId: '',
-
       // 切换学生list
       cutListShow: false,
 
@@ -234,7 +225,9 @@ export default {
       // 学期列表
       termList: [],
       // 学期筛选框所选择的数据
-      termData: [],
+      termId: '',
+      // 学期重置储存
+      termData: '',
 
       // 记录渲染数据
       TermRecord: [],
@@ -263,7 +256,7 @@ export default {
     selectCordS() {
       const data4 = {
         uid: this.stuId,
-        trm: this.termData[0],
+        trm: this.termId,
         txt: ''
       }
       // console.log('data4', data4)
@@ -356,16 +349,28 @@ export default {
 
     // 获取学期筛选框
     selTerm() {
+      this.termList = []
       selectTerm().then(res => {
-        // console.log('获取学期筛选框', res)
+        console.log('获取学期筛选框', res[0])
         res[0].forEach(e => {
           if (e.defaultC === 1) {
-            this.termData.push(e.id)
+            this.termData = e.id
             this.termId = e.id
           }
+          const a = { value: '', text: '' }
+          a.value = e.id
+          a.text = e.name
+          this.termList.push(a)
         })
         // console.log('this.termData', this.termData)
-        this.termList = res[0]
+        // this.termList = res[0]
+        // res[0].forEach((e, index) => {
+        //   var val = { value: '', text: '' }
+        //   val.value = e.id
+        //   val.value.text = e.name
+        //   this.termList.push(val)
+        // })
+        // console.log('this.termList', this.termList)
         this.getData()
         this.getTermRecord()
 
@@ -384,7 +389,8 @@ export default {
       // 判断学生在数组中的位置，获取班学生列表有初始值
       // this.activeItem = null
       // 刷新学期
-      this.termData.splice(0, 1, this.termId)
+      // this.termData.splice(0, 1, this.termId)
+      this.termId = this.termData
 
       this.num = this.num - 1
       if (this.num >= 0) {
@@ -405,7 +411,8 @@ export default {
 
       // this.activeItem = null
       // 刷新学期
-      this.termData.splice(0, 1, this.termId)
+      // this.termData.splice(0, 1, this.termId)
+      this.termId = this.termData
 
       this.num = this.num + 1
       if (this.num <= this.stuList.length - 1) {
@@ -480,7 +487,7 @@ export default {
       this.cutListShow = false
 
       // this.selectCordS()
-      this.$refs.claSel.close()
+      // this.$refs.claSel.close()
       // this.$refs.weiSel.close()
     },
 
@@ -504,7 +511,9 @@ export default {
       this.filtrateData = ''
       // this.activeItem = null
       // 刷新学期
-      this.termData.splice(0, 1, this.termId)
+      // this.termData.splice(0, 1, this.termId)
+      this.termId = this.termData
+
       // this.num = this.num + 1
       // if (this.num <= this.stuList.length - 1) {
 
@@ -551,7 +560,7 @@ export default {
     getTermRecord() {
       const data4 = {
         uid: this.stuId,
-        trm: this.termData[0],
+        trm: this.termId,
         txt: this.filtrateData
       }
       // return console.log('getTermRecord', data4)
@@ -652,15 +661,28 @@ export default {
   color: #fff;
   // left: 0;
 }
-
+.btnBack {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .weiSelectCss {
+  width: 100%;
   display: flex;
-  justify-content: flex-end;
+  font-size: 22px !important;
   align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 15%;
+  border-bottom: 1px solid #e7e7e7;
 }
 /deep/.van-dropdown-menu__bar {
   box-shadow: none;
-  padding-right: 20px;
+  // padding-right: 20px;
   background: none;
   height: 1rem;
   // margin-left: 30px !important;
@@ -672,7 +694,6 @@ export default {
 
 /deep/ .van-ellipsis {
   font-size: 14px;
-  color: black;
 }
 /deep/ .van-dropdown-menu__title::after {
   border-color: transparent transparent #000 #000;
@@ -685,8 +706,7 @@ export default {
 .van-cell__value {
   font-weight: normal;
 }
-// .van-ellipsis {
-// }
+
 /deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
   color: #3b84fc;
 }
@@ -738,7 +758,7 @@ export default {
   // max-height: 95px;
   border-bottom: 1px solid #e7e7e7;
   box-sizing: border-box;
-  padding: 0 10px;
+  padding: 0 15px;
   overflow: hidden;
   background-color: #fff;
 
@@ -786,22 +806,21 @@ export default {
   .top {
     margin: auto;
     width: 100vw;
-    height: 150px;
+    height: 140px;
     background-color: #005ccd;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    padding: 0 10px;
+    padding: 0 15px;
     color: #fff;
     .rig {
       display: flex;
-      width: 40%;
+      // width: 30%;
       height: 100%;
-      justify-content: space-around;
+      justify-content: space-between;
 
       .topBtnS {
-        // flex: 1;
         width: 90px;
         display: flex;
         justify-content: space-between;
@@ -821,32 +840,29 @@ export default {
       .sInfo {
         position: relative;
         display: flex;
+        margin-bottom: 5px;
         /deep/.van-ellipsis {
           color: #fff;
           font-size: 18px;
         }
         .userName {
-          width: 135px;
+          width: 140px;
           position: relative;
-          overflow: hidden;
-          margin-right: 5px;
-          height: 20px;
-          line-height: 20px;
           color: #ffffff;
           font-size: 20px;
-          text-align: left;
           white-space: nowrap;
+          overflow: hidden;
           text-overflow: ellipsis;
           font-family: PingFangSC-regular;
           box-sizing: border-box;
-          padding-right: 15px;
+          padding-right: 35px;
         }
         .sInfoList {
           position: absolute;
           width: 100vw;
           bottom: -70px;
           transform: translate(0, calc(100% - 65px));
-          left: -10px;
+          left: -15px;
           z-index: 99;
           height: 90vh;
           color: #000;
@@ -888,6 +904,7 @@ export default {
       .cla {
         overflow: hidden;
         width: 100%;
+        font-weight: 50;
         // overflow-wrap: break-word;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -908,6 +925,15 @@ export default {
     }
   }
   //   顶部学生信息结束
+  .left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    .img {
+      width: 28px;
+    }
+  }
 
   //   观察记录开始
   .observe_tit {
@@ -916,7 +942,6 @@ export default {
     width: 100%;
     box-sizing: border-box;
     padding: 10px;
-    display: flex;
     line-height: 20px;
     color: rgba(16, 16, 16, 1);
     font-size: 14px;
@@ -928,13 +953,6 @@ export default {
     background-color: #fff;
     justify-content: space-between;
     font-weight: bold;
-    .left {
-      display: flex;
-      align-items: center;
-    }
-    .img {
-      width: 26px;
-    }
   }
   .observe_box {
     width: 100%;