2022.3.23计时样式

fhKeeper/formulahousekeeper/timesheet_h5/src/views/timetool/timetool.vue

@@ -32,13 +32,14 @@
         </van-dropdown-menu> -->
       </div>
       <div class="selectgx">
-        <div>选择工序<span v-show="selectgxshow" style="color:#c03131;">请选择工序</span></div>
+        <div class="selectgxtitle">选择工序<span v-show="selectgxshow" style="color:#c03131;">请选择工序</span></div>
         <van-grid :border="false" :column-num="3">
-          <van-grid-item v-for="(item, index) in selectG" :key="index">
+          <van-grid-item v-for="(item, index) in selectG" :key="index" :class="index == inbtn ? 'inbtn' : ''">
             <van-button
+            class="selectgxbtn"
               type="default"
               size="small"
-              @click="selectGx(item.index)"
+              @click="selectGx(item.index,index)"
               >{{ item.name }}</van-button
             >
           </van-grid-item>
@@ -46,13 +47,16 @@
       </div>
       <div class="timingBtn">
         <van-button
-          type="default"
+        class="timbutton"
+        plain
+         hairline
+          type="info"
           size="large"
           block
           style="height: 100px"
           @click="startTiming()"
         >
-          <div v-show="tBtnText">
+          <div v-show="tBtnText" class="timint">
             {{ timingH < 10 ? "0" + timingH : timingH }}:{{
               timingM < 10 ? "0" + timingM : timingM
             }}:{{ timingS < 10 ? "0" + timingS : timingS }}
@@ -103,6 +107,7 @@ export default {
       selectXshow: false,
       selectgxshow: false,
       valueclass:null,
+      inbtn:null,
       // 条目选择
       selectOpt: [],
       selectOptS:[],
@@ -167,9 +172,10 @@ export default {
                 }
             },
     // 选择工序
-    selectGx(e) {
-      console.log(e);
+    selectGx(e,i) {
+      console.log(e,i);
       this.loadata1 = e;
+      this.inbtn = i
       this.selectgxshow = false
     },
     // 计时器
@@ -265,40 +271,78 @@ export default {
     color: #c03131;
 }
 .select {
-  span {
-    float: left;
-    width: 50%;
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-    background-color: #fff;
+    .van-cell{
+        line-height: 1rem;
+    }
+    .van-cell__title{
+        text-align: center;
+        span{
+            color: #646566;
+        }
+    }
+  .van-cell__value{
+      text-align: center;
   }
 }
 .selectgx {
   background-color: #fff;
+  .selectgxtitle{
+      margin-left: 10%;
+      text-align: left;
+      font-size: 14px;
+      color: #646566;
+      height: 0.4rem;
+      line-height: 0.4rem;
+      span{
+          margin-left: 0.9rem;
+          font-size: 0.33rem;
+      }
+  }
+  .inbtn{
+      .selectgxbtn{
+          color: #1989fa;
+          border-color: #1989fa;
+      }
+  }
+  .van-grid-item{
+      height: 1.5rem;
+  }
+  .selectgxbtn{
+      width: 90%;
+    //   height: 100%;
+  }
+}
+.timingBtn{
+    padding: 3% 8%;
+    .timbutton{
+        .timint{
+            height: 0.8rem;
+        }
+    }
 }
 .van-dropdown-menu {
   float: right;
   width: 50%;
 }
-.van-cell__title {
-  text-align: right !important;
-}
 .recordList {
-  padding-left: 2%;
-  padding-right: 2%;
+  padding-left: 4%;
+  padding-right: 4%;
   background-color: #fff;
   li {
     width: 100%;
-    padding-top: 2%;
+    padding-top: 4%;
     border-bottom: 1px solid #eee;
     .upper {
       height: 0.56rem;
       .entry {
         float: left;
+        font-size: 0.4rem;
+        color: #414141;
       }
       .date {
         float: right;
+        font-size: 0.39rem;
+        color: #646566;
       }
     }
     .below {
@@ -306,13 +350,23 @@ export default {
       height: 0.7rem;
       .procedure {
         float: left;
+        color: #767676;
+        font-size: 0.38rem;
       }
       .timeinterval {
         float: right;
+        margin-top: 0.08rem;
+        color: #969799;
+        font-size: 0.35rem;
+        line-height: 0.48rem;
       }
       .duration {
         margin-left: 0.3rem;
         float: right;
+        margin-top: 0.08rem;
+        color: #969799;
+        font-size: 0.35rem;
+        line-height: 0.48rem;
       }
     }
   }