zhulizhen 5 years ago
parent
commit
adfc344036
1 changed files with 57 additions and 3 deletions
  1. 57 3
      src/views/doBusiness/index.vue

+ 57 - 3
src/views/doBusiness/index.vue

@@ -1,8 +1,35 @@
 
 <template>
-  <div>
+  <div class="business">
     <Head :headText="headText"></Head>
-    <div class="doBusinessContainer">营业时间</div>
+    <div  class="date">
+       <el-date-picker
+        v-model="valueDate"
+        type="date"
+        placeholder="选择日期">
+      </el-date-picker>
+    </div>
+    <el-calendar class="doBusinessContainer">
+      <template
+        slot="dateCell"
+        slot-scope="{date, data}">
+        <p >
+          <span class="time-duration">
+             <el-time-picker
+              is-range
+              v-model="value1"
+              size="mini"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              placeholder="选择时间范围"
+              format='hh:mm'>
+            </el-time-picker>
+          </span>
+          {{ data.day.split('-').slice(2).join('')}}
+        </p>
+      </template>
+    </el-calendar>
   </div>
 </template>
 <script>
@@ -10,7 +37,9 @@ import Head from "../main/index";
 export default {
   data() {
     return {
-      headText: "营业时间调整"
+      headText: "营业时间调整",
+      value1: [new Date(), new Date()],
+      valueDate:new Date()
     };
   },
   components: {
@@ -19,8 +48,33 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+ .date{
+    margin-left:20px;
+    margin-top: 20px;
+  }
 .doBusinessContainer {
   padding: 16px;
   background: #fff;
+  .time-duration{
+    .el-input__inner{
+      width:134px;
+      padding: 0;
+      border: none;
+      font-size:14px;
+      font-family:PingFangSC-Regular,PingFang SC;
+      font-weight:400;
+      color:rgba(100,108,115,1);
+      line-height:24px;
+      padding: 1px 12px;
+      height:24px;
+      background:rgba(245,246,247,1);
+      border-radius:12px;
+      margin-right: 17px;
+    }
+     .el-range-editor .el-range-input{
+        border: none;
+        background:rgba(245,246,247,1);
+      }
+  }
 }
 </style>