devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

时间刻度组件_范围标记 时间刻度组件

作者：我家自动化 | 2024-02-17 02:28:28

赞

踩

范围标记 时间刻度组件

最近遇到一个类似钉钉时刻的需求，如图所示：

代码：

  1. <template>
  2.   <!-- <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh"> -->
  3.   <div class="sign-wrap">
  4.     <div class="meeting-sign-wraper" :class="{ isMember: !memberFlag }">
  5.       <!-- <div class="close_box" @click="close"><img src="../img/x.svg" alt="" /></div> -->
  6.       <div class="screen-guide" @click="jump">
  7.         <span>投屏指引</span>
  8.         <img src="../img/箭头.svg" alt="" />
  9.       </div>
  10.       <div v-if="waitSignData && waitSignData.beginTime" class="sign-top">
  11.         <div v-if="memberFlag" class="meeting-name">{{ waitSignData.title || '会议室签到' }}</div>
  12.         <div class="meeting-time">
  13.           <div class="time left">
  14.             <div>{{ momentTime(waitSignData.beginTime) }}</div>
  15.             <p>{{ todayDate }}</p>
  16.           </div>
  17.           <div class="center">
  18.             <div class="line"></div>
  19.             <div class="middle">{{ diffTime(waitSignData) }}</div>
  20.             <div class="line"></div>
  21.           </div>
  22.           <div class="time right">
  23.             <div>{{ momentTime(waitSignData.endTime) }}</div>
  24.             <p>{{ todayDate }}</p>
  25.           </div>
  26.         </div>
  27.         <div class="meeting-users" v-if="waitSignData.members && memberFlag">
  28.           <span>参会人：</span>
  29.           <span v-for="(item, index) in membersList" :key="index">
  30.             <span>{{ item }}</span>
  31.             <span v-if="index != membersList.length - 1">、</span>
  32.           </span>
  33.           <span v-if="waitSignData.members">{{
  34.             waitSignData.members.length > 0 ? `等${waitSignData.members.length}人` : `无`
  35.           }}</span>
  36.         </div>
  37.         <div class="meeting-id">
  38.           <!-- <span>会议ID：8007157101</span> -->
  39.           <span>会议室：{{ waitSignData.room }}</span>
  40.         </div>
  41.         <div class="btn-box">
  42.           <div v-if="memberFlag" class="btn" :class="{ active: isActive }" @click="signClick">
  43.             {{ isActiveTxt }}
  44.           </div>
  45.           <div v-if="!memberFlag" class="no-sign">
  46.             <img src="../img/提示.svg" alt="" />
  47.             <span>您不是本次会议参会人，无法签到！</span>
  48.           </div>
  49.         </div>
  50.       </div>
  51.       <div v-if="!(waitSignData && waitSignData.beginTime)">
  52.         <div v-if="!signOut" class="no-waitSign">
  53.           <img src="../img/白色提示.svg" alt="" />
  54.           <span>暂无预约</span>
  55.         </div>
  56.       </div>
  57.       <div class="sign-content" ref="signContent">
  58.         <img v-show="btnFlag" class="img-line" src="../img/线.svg" alt="" @click="handleClick" />
  59.         <img v-show="!btnFlag" class="img-down" src="../img/下拉.svg" alt="" @click="handleClick" />
  60.         <div class="sign-content-wrap" ref="contentWrap">
  61.           <ul class="scroll-box">
  62.             <li>
  63.               <div class="date">{{ todayDate }}</div>
  64.               <div class="time-kedu-box">
  65.                 <div class="m-s-header-container scroll-wrapper">
  66.                   <table
  67.                     class="transform-element scroll-content"
  68.                     :style="{
  69.                       transform: `translateX(${translateX}px)`,
  70.                       width: itemWidth * timeList.length + leftPadding + 'px',
  71.                     }"
  72.                   >
  73.                     <tr>
  74.                       <th :style="{ width: 0 + 'px' }"></th>
  75.                       <th
  76.                         :style="{ width: itemWidth + 'px' }"
  77.                         v-for="(item, index) in timeList"
  78.                         :key="item.name"
  79.                       >
  80.                         <div class="header-item">
  81.                           {{ item.name }}
  82.                         </div>
  83.                       </th>
  84.                     </tr>
  85.  
  86.                     <div
  87.                       v-if="isToday"
  88.                       :style="{
  89.                         left: timeLeftValue + 'px',
  90.                       }"
  91.                       class="current-time-line"
  92.                     ></div>
  93.  
  94.                     <div
  95.                       v-for="(lis, index) in timestampList"
  96.                       :key="index"
  97.                       :style="{
  98.                         width: positionWidth(lis) + 'px',
  99.                         left: timeToPosition(momentTime(lis.beginTime)) + 'px',
  100.                         right: 0 - timeToPosition(momentTime(lis.endTime)) + 'px',
  101.                       }"
  102.                       class="m-s-activity overflow-hidden"
  103.                     ></div>
  104.                   </table>
  105.  
  106.                   <!-- <button
  107.                     @click.stop="translateHandle(1, $event)"
  108.                     class="translate-handle translate-left"
  109.                   >
  110.                     <i class="el-icon-arrow-left"></i>
  111.                   </button>
  112.                   <button
  113.                     @click.stop="translateHandle(2, $event)"
  114.                     class="translate-handle translate-right"
  115.                   >
  116.                     <i class="el-icon-arrow-right"></i>
  117.                   </button> -->
  118.                 </div>
  119.               </div>
  120.               <div class="time-content">
  121.                 <div class="content-box" v-for="(item, index) in meetingData" :key="index">
  122.                   <div class="content-top">
  123.                     <div class="time left">{{ momentTime(item.beginTime) }}</div>
  124.                     <div class="line"></div>
  125.                     <div class="middle">{{ diffTime(item) }}</div>
  126.                     <div class="line"></div>
  127.                     <div class="time right">{{ momentTime(item.endTime) }}</div>
  128.                   </div>
  129.                   <div class="content-bottom">
  130.                     主持人：<span>{{ item.sponsorName }}</span>
  131.                   </div>
  132.                 </div>
  133.               </div>
  134.             </li>
  135.           </ul>
  136.         </div>
  137.       </div>
  138.     </div>
  139.   </div>
  140.   <!-- </van-pull-refresh> -->
  141. </template>
  142.  
  143. <script>
  144. import moment from 'moment';
  145. import BScroll from '@better-scroll/core';
  146. import { meetingList, waitSign, meetingSign } from '../api';
  147. let currentTimer = null;
  148. import { closeWindow } from '@/utils/jsBridge';
  149. export default {
  150.   props: {
  151.     defaultDate: {
  152.       type: String,
  153.       default: moment().format('YYYY-MM-DD'),
  154.     },
  155.   },
  156.   data() {
  157.     return {
  158.       btnFlag: true,
  159.       memberFlag: true, // 是否为参会人
  160.       signOut: false, // 已签退
  161.       isActive: false, // 待签到
  162.       isActiveTxt: '会议室签到',
  163.       timeStart: 0,
  164.       timeEnd: 24,
  165.       itemWidth: 28 / 4, //会议时间间隔宽度
  166.       translateX: 0, //横向滚动距离
  167.       max_translateX: 0, //最大可滚动距离
  168.       currentTimeLeftValue: 0,
  169.       currentTime: '00:00',
  170.       currentTimeValue: 0,
  171.       activeDate: {}, //默认日期
  172.       meetingData: [],
  173.       waitSignData: {},
  174.       todayDate: moment().format('YYYY/MM/DD'),
  175.       roomCode: '',
  176.       refreshLoading: false,
  177.       scroll: ''
  178.     };
  179.   },
  180.   watch: {
  181.     defaultDate(val) {
  182.       if (val) {
  183.         this.activeDate = moment(val);
  184.       }
  185.     },
  186.     meetingData() {
  187.       this.$nextTick(() => {
  188.         this.scroll.refresh()
  189.       })
  190.     }
  191.   },
  192.   created() {
  193.     this.roomCode = this.getQueryString('roomCode');
  194.  
  195.     this.getCurrentTime();
  196.     clearInterval(currentTimer);
  197.     currentTimer = setInterval(this.getCurrentTime, 1e3 * 60);
  198.     this.activeDate = this.defaultDate ? moment(this.defaultDate) : moment();
  199.   },
  200.   async mounted() {
  201.     this.init();
  202.     this.initScroll();
  203.     this.initYZScroll();
  204.     await this.waitSign();
  205.     await this.meetingList();
  206.   },
  207.   beforeDestroy() {
  208.     clearInterval(currentTimer);
  209.   },
  210.   computed: {
  211.     timestampList() {
  212.       let arrList = [];
  213.       let mtList = [];
  214.       let waitList = [];
  215.       if (this.meetingData.length > 0) {
  216.         mtList = this.meetingData.map((el) => {
  217.           return {
  218.             beginTime: el.beginTime,
  219.             endTime: el.endTime,
  220.           };
  221.         });
  222.       }
  223.       if (this.waitSignData && this.waitSignData.beginTime) {
  224.         waitList.push({
  225.           beginTime: this.waitSignData.beginTime,
  226.           endTime: this.waitSignData.endTime,
  227.         });
  228.       }
  229.       return [...waitList ,...mtList];
  230.     },
  231.     membersList() {
  232.       let arr = this.waitSignData.members || [];
  233.       if (arr.length < 5) {
  234.         return arr;
  235.       }
  236.       return arr.slice(0, 4);
  237.     },
  238.     timeDiff() {
  239.       return (this.timeEnd - this.timeStart) * 4;
  240.     },
  241.     timeList() {
  242.       const timeList = [];
  243.       for (let i = 0; i < this.timeDiff; i++) {
  244.         const item = {};
  245.         if (i % 4 == 0) {
  246.           // item.name = `${Math.floor(i / 4)}:00`;
  247.           item.name = `${Math.floor(i / 4)}`;
  248.         } else {
  249.           item.name = `${Math.floor(i / 4)}:${(i % 4) * 15}`;
  250.         }
  251.         item.time = i / 4;
  252.         timeList.push(item);
  253.       }
  254.       return timeList;
  255.     },
  256.     leftPadding() {
  257.       return this.itemWidth;
  258.     },
  259.     isToday() {
  260.       return moment().format('YYYY-MM-DD') === this.activeDate.format('YYYY-MM-DD');
  261.     },
  262.     isPast() {
  263.       return (
  264.         moment(this.activeDate.format('YYYY-MM-DD')).unix() <
  265.         moment(moment().format('YYYY-MM-DD')).unix()
  266.       );
  267.     },
  268.     maxWidth() {
  269.       return this.itemWidth * this.timeList.length + this.leftPadding;
  270.     },
  271.     timeLeftValue() {
  272.       return this.isToday
  273.         ? this.currentTimeLeftValue
  274.         : this.isPast
  275.         ? this.maxWidth
  276.         : this.leftPadding;
  277.     },
  278.     timeValue() {
  279.       return this.isToday ? this.currentTimeValue : this.isPast ? this.timeList.length - 1 : -1;
  280.     },
  281.   },
  282.   methods: {
  283.     onRefresh() {
  284.       Promise.all([this.meetingList(), this.waitSign()])
  285.         .then((result) => (this.refreshLoading = false))
  286.         .catch((e) => console.log(e));
  287.     },
  288.     close() {
  289.       closeWindow();
  290.     },
  291.     userAgent() {
  292.       const userAgent = window.navigator.userAgent.toLocaleLowerCase();
  293.       if (!userAgent.includes('360teams')) {
  294.         this.$router.push({ path: '/meetingSignWX', query: { roomCode: this.roomCode } });
  295.       }
  296.     },
  297.     getQueryString(name) {
  298.       var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  299.       var r = window.location.search.substr(1).match(reg);
  300.       if (r != null) return unescape(decodeURI(r[2]));
  301.       return null;
  302.     },
  303.     momentTime(time) {
  304.       return moment(time).format('HH:mm');
  305.     },
  306.     diffTime(item) {
  307.       let diffVal = moment(item.endTime).diff(moment(item.beginTime), 'minute');
  308.       return `${Math.floor(diffVal / 60)}小时${diffVal % 60 || 0}分钟`;
  309.     },
  310.     // 已预约会议列表
  311.     async meetingList() {
  312.       let params = {
  313.         roomCode: this.roomCode,
  314.       };
  315.       let res = await meetingList(params);
  316.       let { code, data, msg } = res || {};
  317.       if (code === 0) {
  318.         this.meetingData = data;
  319.       } else {
  320.         this.meetingData = [];
  321.       }
  322.     },
  323.     // 查询当前待签到的会议信息
  324.     async waitSign() {
  325.       let params = {
  326.         roomCode: this.roomCode,
  327.       };
  328.       let res = await waitSign(params);
  329.       let { code, data, msg } = res || {};
  330.       if (code === 0) {
  331.         this.waitSignData = data;
  332.         this.isActive = this.waitSignData.checkStatus;
  333.         this.memberFlag = this.waitSignData.memberFlag;
  334.         if (this.waitSignData.checkStatus === 0) {
  335.           this.isActiveTxt = '会议室签到';
  336.         } else {
  337.           this.isActiveTxt = '会议室签退';
  338.         }
  339.       } else {
  340.         this.$toast.fail(msg);
  341.         this.waitSignData = {};
  342.         this.isActive = !this.isActive;
  343.         // this.handleClick();
  344.       }
  345.     },
  346.     initScroll() {
  347.       let vm = this;
  348.       this.$nextTick(() => {
  349.         let bs = new BScroll('.scroll-wrapper', {
  350.           startX: vm.translateX,
  351.           click: true,
  352.           scrollX: true,
  353.           scrollY: false, // 忽略竖直方向的滚动
  354.           eventPassthrough: 'vertical',
  355.           bounce: {
  356.             left: false,
  357.             right: false,
  358.           },
  359.         });
  360.       });
  361.     },
  362.     initYZScroll() {
  363.       let vm = this;
  364.       this.$nextTick(() => {
  365.         this.scroll = new BScroll('.scroll-box', {
  366.           probeType: 3,
  367.           click: true,
  368.           scrollX: false,
  369.           scrollY: true,
  370.           bounce: {
  371.             top: false,
  372.             bottom: false,
  373.           },
  374.         });
  375.       });
  376.     },
  377.     handleClick() {
  378.       this.btnFlag = !this.btnFlag;
  379.       if (this.btnFlag) {
  380.         if (this.$refs.signContent && this.$refs.contentWrap) {
  381.           this.$refs.signContent.style.top = '44%';
  382.           this.$refs.contentWrap.style.height = '360px';
  383.         }
  384.       } else {
  385.         if (this.$refs.signContent && this.$refs.contentWrap) {
  386.           this.$refs.signContent.style.top = '13%';
  387.           this.$refs.contentWrap.style.height = '570px';
  388.         }
  389.       }
  390.     },
  391.     jump() {
  392.       this.$router.push({ name: 'screenGuide' });
  393.     },
  394.     // 会议签到或签退
  395.     async signClick() {
  396.       if (!this.isActive) {
  397.         let res = await meetingSign({
  398.           roomCode: this.roomCode,
  399.           id: this.waitSignData.id || '',
  400.           sign: true,
  401.         });
  402.         let { code, data, msg } = res || {};
  403.         if (code === 0) {
  404.           this.isActive = !this.isActive;
  405.           this.isActiveTxt = '会议室签退';
  406.           this.$toast.success('已签到！');
  407.         } else if (code === 12058) {
  408.           // 未认证
  409.           this.$toast.fail(msg);
  410.         } else {
  411.           this.$toast.fail(msg);
  412.           this.meetingList();
  413.           this.waitSign();
  414.         }
  415.       } else {
  416.         this.$dialog
  417.           .confirm({
  418.             title: '',
  419.             message: '是否确定释放本会议室？',
  420.           })
  421.           .then(async () => {
  422.             let res = await meetingSign({
  423.               roomCode: this.roomCode,
  424.               id: this.waitSignData.id || '',
  425.               sign: false,
  426.             });
  427.             let { code, data, msg } = res || {};
  428.             if (code === 0) {
  429.               this.waitSignData = {};
  430.               // this.signOut = true;
  431.               this.isActive = !this.isActive;
  432.               this.isActiveTxt = '会议室签到';
  433.               this.$toast.success('已签退！');
  434.               // this.handleClick();
  435.             } else if (code === 12058) {
  436.               // 未认证
  437.               this.$toast.fail(msg);
  438.             } else {
  439.               this.$toast.fail(msg);
  440.               this.meetingList();
  441.               this.waitSign();
  442.             }
  443.           })
  444.           .catch(() => {});
  445.       }
  446.     },
  447.     //左翻右翻操作
  448.     translateHandle(type, e) {
  449.       //内层宽度
  450.       const INNER_WIDTH = this.maxWidth;
  451.       //外层宽度
  452.       const OUTER_WIDTH = e.target.parentNode.offsetWidth;
  453.       // 步长
  454.       const STEP = this.itemWidth * 4;
  455.       //内外宽度差，最大可移动距离
  456.       const MAX = INNER_WIDTH - OUTER_WIDTH;
  457.       if (type == 1) {
  458.         if (this.translateX < 0) {
  459.           this.translateX +=
  460.             this.translateX + STEP + this.leftPadding < 0 ? STEP : 0 - this.translateX;
  461.         }
  462.       } else {
  463.         if (MAX + this.translateX > 0) {
  464.           this.translateX -=
  465.             MAX + this.translateX > STEP + this.leftPadding ? STEP : MAX + this.translateX;
  466.         }
  467.       }
  468.     },
  469.     init() {
  470.       const outerWidth = document.querySelector('.m-s-header-container').offsetWidth;
  471.       const innerWidth = document.querySelector(
  472.         '.m-s-header-container .transform-element',
  473.       ).offsetWidth;
  474.       this.max_translateX = innerWidth > outerWidth ? innerWidth - outerWidth : 0;
  475.       if (this.isToday) {
  476.         let hour = new Date().getHours();
  477.         let posit;
  478.         if (hour <= 2) {
  479.           this.translateX = 0;
  480.         } else {
  481.           posit = (hour - 2) * 4 * this.itemWidth;
  482.           this.translateX = 0 - (this.max_translateX > posit ? posit : this.max_translateX);
  483.         }
  484.       } else {
  485.         this.translateX =
  486.           0 -
  487.           (this.max_translateX > this.itemWidth * 36 ? this.itemWidth * 36 : this.max_translateX);
  488.       }
  489.     },
  490.     // 当前时间分割标记
  491.     getCurrentTime() {
  492.       const D = new Date();
  493.       const NOW_HOURS = D.getHours();
  494.       const NOW_MINUTES = D.getMinutes();
  495.       this.currentTime = `${NOW_HOURS}:${NOW_MINUTES > 9 ? NOW_MINUTES : '0' + NOW_MINUTES}`;
  496.       // 当前时间/15分钟所得数
  497.       this.currentTimeValue = NOW_HOURS * 4 + Math.floor(NOW_MINUTES / 15);
  498.       // 当前时间/15分钟*每一列的宽度
  499.       this.currentTimeLeftValue = this.itemWidth * (NOW_HOURS * 4 + NOW_MINUTES / 15);
  500.     },
  501.     timeToPosition(time) {
  502.       if (time) {
  503.         const [H, M] = time.split(':');
  504.         return (
  505.           parseInt(H) * 4 * this.itemWidth + (parseInt(M) / 15) * this.itemWidth
  506.         );
  507.       }
  508.     },
  509.     positionWidth(item) {
  510.       let diffVal = moment(item.endTime).diff(moment(item.beginTime), 'minute');
  511.       let m = diffVal / 15 * this.itemWidth;
  512.       return m;
  513.     }
  514.   },
  515. };
  516. </script>
  517.  
  518. <style scoped lang="scss">
  519. .van-pull-refresh {
  520.   height: 100%;
  521. }
  522. .sign-wrap {
  523.   height: 100%;
  524.   background: #ffffff;
  525.   .meeting-sign-wraper {
  526.     position: relative;
  527.     height: 100%;
  528.     padding: 0px 30px;
  529.     padding-top: 35px;
  530.     background: url('../img/蓝.svg') no-repeat;
  531.     // background-size: 375px;
  532.     background-size: contain;
  533.     &.isMember {
  534.       background: url('../img/灰.svg') no-repeat;
  535.       background-size: contain;
  536.     }
  537.  
  538.     .close_box {
  539.       width: 40px;
  540.       height: 26px;
  541.       opacity: 0.6;
  542.       background: rgba(255, 255, 255, 0);
  543.       border: 1px solid #ffffff;
  544.       border-radius: 14px;
  545.       color: #ffffff;
  546.       display: flex;
  547.       align-items: center;
  548.       justify-content: center;
  549.       line-height: 26px;
  550.       position: fixed;
  551.       top: 10px;
  552.       right: 10px;
  553.  
  554.       img {
  555.         width: 9px;
  556.         height: 9px;
  557.       }
  558.     }
  559.  
  560.     .screen-guide {
  561.       width: 84px;
  562.       height: 31px;
  563.       background: #ff7d00;
  564.       border-radius: 16px 0px 0px 16px;
  565.       box-shadow: 0px 1px 6px 0px #e5b07e;
  566.       position: fixed;
  567.       top: 44%;
  568.       right: -1px;
  569.       z-index: 1000;
  570.       display: flex;
  571.       align-items: center;
  572.       justify-content: center;
  573.       cursor: pointer;
  574.  
  575.       span {
  576.         font-size: 13px;
  577.         font-family: PingFangSC, PingFangSC-Regular;
  578.         font-weight: 400;
  579.         color: #ffffff;
  580.         line-height: 17px;
  581.         margin-right: 5px;
  582.       }
  583.  
  584.       img {
  585.         width: 9px;
  586.         height: 9px;
  587.       }
  588.     }
  589.  
  590.     .sign-top {
  591.       .meeting-name {
  592.         font-size: 19px;
  593.         font-family: PingFangSC, PingFangSC-Semibold;
  594.         font-weight: 600;
  595.         color: #ffffff;
  596.         line-height: 27px;
  597.         margin-bottom: 12px;
  598.         overflow: hidden;
  599.         text-overflow: ellipsis;
  600.         white-space: nowrap;
  601.       }
  602.       .meeting-time {
  603.         display: flex;
  604.         align-items: center;
  605.         justify-content: space-between;
  606.         .time {
  607.           > div {
  608.             font-size: 25px;
  609.             font-family: DINAlternate, DINAlternate-Bold;
  610.             font-weight: 700;
  611.             color: #ffffff;
  612.             line-height: 29px;
  613.           }
  614.           > p {
  615.             opacity: 0.7;
  616.             font-size: 12px;
  617.             font-family: PingFangSC, PingFangSC-Regular;
  618.             font-weight: 400;
  619.             color: #ffffff;
  620.             line-height: 17px;
  621.           }
  622.           &.left {
  623.             margin-right: 17px;
  624.           }
  625.           &.right {
  626.             margin-left: 17px;
  627.           }
  628.         }
  629.         .center {
  630.           display: flex;
  631.           align-items: center;
  632.           justify-content: center;
  633.         }
  634.         .line {
  635.           width: 30px;
  636.           height: 1px;
  637.           background: #b0c5ff;
  638.           margin: 0px 5px;
  639.         }
  640.         .middle {
  641.           width: 80px;
  642.           height: 23px;
  643.           opacity: 0.6;
  644.           background: #4273f6;
  645.           border-radius: 3px;
  646.           font-size: 12px;
  647.           font-family: PingFangSC, PingFangSC-Regular;
  648.           font-weight: 400;
  649.           color: #ffffff;
  650.           line-height: 17px;
  651.           display: flex;
  652.           align-items: center;
  653.           justify-content: center;
  654.         }
  655.       }
  656.       .meeting-users {
  657.         font-size: 14px;
  658.         font-family: PingFangSC, PingFangSC-Regular;
  659.         font-weight: 400;
  660.         color: #ffffff;
  661.         line-height: 17px;
  662.         margin-top: 12px;
  663.       }
  664.       .meeting-id {
  665.         font-size: 14px;
  666.         font-family: PingFangSC, PingFangSC-Regular;
  667.         font-weight: 400;
  668.         color: #ffffff;
  669.         line-height: 17px;
  670.         margin-top: 8px;
  671.       }
  672.       .btn-box {
  673.         display: flex;
  674.         align-items: center;
  675.         justify-content: center;
  676.         // margin-top: 15px;
  677.         position: fixed;
  678.         left: 50%;
  679.         top: 30%;
  680.         transform: translateX(-50%);
  681.         .btn {
  682.           width: 208px;
  683.           height: 40px;
  684.           background: #4273f6;
  685.           border-radius: 22px;
  686.           box-shadow: 0px 3px 5px 0px #0347e6;
  687.           font-size: 16px;
  688.           font-family: PingFangSC, PingFangSC-Regular;
  689.           font-weight: 400;
  690.           color: #ffffff;
  691.           line-height: 16px;
  692.           display: flex;
  693.           align-items: center;
  694.           justify-content: center;
  695.  
  696.           &.active {
  697.             background: #ff7d00;
  698.             box-shadow: 0px 3px 5px 0px #e5b07e;
  699.           }
  700.         }
  701.  
  702.         .no-sign {
  703.           width: 268px;
  704.           height: 32px;
  705.           background: #ffffff;
  706.           border-radius: 4px;
  707.           font-size: 14px;
  708.           font-family: PingFangSC, PingFangSC-Regular;
  709.           font-weight: 400;
  710.           color: #ff7d00;
  711.           display: flex;
  712.           align-items: center;
  713.           justify-content: center;
  714.  
  715.           > img {
  716.             width: 17px;
  717.             margin-right: 7px;
  718.           }
  719.         }
  720.       }
  721.     }
  722.     .no-waitSign {
  723.       display: flex;
  724.       align-items: center;
  725.       justify-content: center;
  726.       position: fixed;
  727.       left: 50%;
  728.       top: 20%;
  729.       transform: translateX(-50%);
  730.       > img {
  731.         width: 17px;
  732.         margin-right: 7px;
  733.       }
  734.       > span {
  735.         font-size: 14px;
  736.         font-family: PingFangSC, PingFangSC-Regular;
  737.         font-weight: 400;
  738.         color: #ffffff;
  739.       }
  740.     }
  741.     .sign-content {
  742.       position: fixed;
  743.       top: 44%;
  744.       left: 50%;
  745.       transform: translateX(-50%);
  746.       width: 343px;
  747.       background: #ffffff;
  748.       border-radius: 8px;
  749.       box-shadow: 0px 2px 5px 0px #e6e6e6;
  750.       transition: all 0.3s;
  751.  
  752.       > div {
  753.         padding: 12px 20px;
  754.         overflow: hidden;
  755.         max-height: 586px;
  756.         height: 360px;
  757.         &::-webkit-scrollbar {
  758.           display: none;
  759.         }
  760.       }
  761.  
  762.       > img {
  763.         position: absolute;
  764.         top: -8%;
  765.         left: 50%;
  766.         transform: translateX(-50%);
  767.         z-index: 999;
  768.  
  769.         &.img-line {
  770.           width: 28px;
  771.         }
  772.         &.img-down {
  773.           width: 22px;
  774.         }
  775.       }
  776.  
  777.       ul {
  778.         overflow: hidden;
  779.         height: 100%;
  780.         li {
  781.           padding-bottom: 30px;
  782.           .date {
  783.             font-size: 15px;
  784.             font-family: PingFangSC, PingFangSC-Medium;
  785.             font-weight: 500;
  786.             color: #5f6368;
  787.             line-height: 20px;
  788.             margin-bottom: 6px;
  789.           }
  790.           .time-kedu-box {
  791.             display: flex;
  792.             align-items: center;
  793.             margin-bottom: 20px;
  794.             overflow-x: auto;
  795.             overflow-y: hidden;
  796.             position: relative;
  797.             height: 35px;
  798.             &::-webkit-scrollbar {
  799.               display: none;
  800.             }
  801.  
  802.             .kedu-wrap {
  803.               width: 29px;
  804.               flex: 0 0 29px;
  805.               margin-right: 2px;
  806.             }
  807.           }
  808.           .time-content {
  809.             .content-box {
  810.               border-bottom: 1px solid #dedede;
  811.               padding: 8px 10px;
  812.               &:last-child {
  813.                 border-bottom: 0px;
  814.               }
  815.               .content-top {
  816.                 display: flex;
  817.                 align-items: center;
  818.                 justify-content: center;
  819.                 .time {
  820.                   font-size: 22px;
  821.                   font-family: DINAlternate, DINAlternate-Bold;
  822.                   font-weight: 700;
  823.                   color: #202124;
  824.                   line-height: 26px;
  825.  
  826.                   &.left {
  827.                     margin-right: 17px;
  828.                   }
  829.                   &.right {
  830.                     margin-left: 10px;
  831.                   }
  832.                 }
  833.                 .line {
  834.                   width: 30px;
  835.                   height: 1px;
  836.                   background: #f0f0f0;
  837.                   margin: 0px 5px;
  838.                 }
  839.                 .middle {
  840.                   width: 82px;
  841.                   height: 23px;
  842.                   background: #f7f7f7;
  843.                   border-radius: 3px;
  844.                   font-size: 12px;
  845.                   font-family: PingFangSC, PingFangSC-Regular;
  846.                   font-weight: 400;
  847.                   color: #5f6368;
  848.                   line-height: 17px;
  849.                   display: flex;
  850.                   align-items: center;
  851.                   justify-content: center;
  852.                 }
  853.               }
  854.               .content-bottom {
  855.                 font-size: 12px;
  856.                 font-family: PingFangSC, PingFangSC-Regular;
  857.                 font-weight: 400;
  858.                 color: #9a9a9a;
  859.                 line-height: 17px;
  860.                 margin-top: 7px;
  861.  
  862.                 span {
  863.                   color: #202124;
  864.                 }
  865.               }
  866.             }
  867.           }
  868.         }
  869.       }
  870.     }
  871.   }
  872. }
  873.  
  874. .transform-element {
  875.   transition: transform 0.5s;
  876. }
  877. table {
  878.   width: 100%;
  879.   table-layout: fixed;
  880.   border-collapse: collapse;
  881. }
  882. .m-s-header-container,
  883. .m-s-body-container {
  884.   width: 100%;
  885. }
  886. .m-s-header-container {
  887.   touch-action: none;
  888.   height: 100%;
  889.   position: relative;
  890.   z-index: 10;
  891.   white-space: nowrap;
  892.   overflow: hidden;
  893.   .translate-handle {
  894.     position: absolute;
  895.     top: 3px;
  896.     z-index: 10;
  897.     display: block;
  898.     width: 20px;
  899.     height: 20px;
  900.     color: #4273f6;
  901.     background-color: #fff;
  902.     border-radius: 50%;
  903.     border: none;
  904.     box-shadow: 0px 0px 8px 0px #edeff1;
  905.     * {
  906.       pointer-events: none;
  907.     }
  908.   }
  909.  
  910.   .translate-left {
  911.     left: 0;
  912.   }
  913.   .translate-right {
  914.     right: 0;
  915.   }
  916.   tr {
  917.     .header-item {
  918.       position: absolute;
  919.       bottom: -20px;
  920.       left: 0;
  921.       float: left;
  922.       color: #90959d;
  923.       font-weight: 400;
  924.       font-size: 10px;
  925.       // line-height: 35px;
  926.       text-align: center;
  927.       transform: translateX(-50%);
  928.       // transform: scale(0.8);
  929.     }
  930.     th {
  931.       position: relative;
  932.       height: 18px;
  933.       border: none;
  934.       background: #f7f7f7;
  935.     }
  936.     th:not(:nth-child(4n + 2)) {
  937.       .header-item {
  938.         display: none;
  939.       }
  940.     }
  941.     th:nth-child(4n + 2) {
  942.       border-left: 2px solid #ffffff;
  943.     }
  944.     th:last-child {
  945.       border-right: 2px solid #ffffff;
  946.     }
  947.   }
  948. }
  949.  
  950. .scroll-wrapper {
  951.   .scroll-content {
  952.     display: inline-block;
  953.   }
  954. }
  955.  
  956. .current-time-line {
  957.   position: absolute;
  958.   top: 0px;
  959.   left: 0px;
  960.   z-index: 100;
  961.   // width: 1px;
  962.   height: 18px;
  963.   border-left: 1px dotted #f35b4e;
  964. }
  965. .m-s-activity {
  966.   position: absolute;
  967.   top: 0;
  968.   display: flex;
  969.   align-items: center;
  970.   height: 100%;
  971.   color: #6d88d0;
  972.   z-index: 200;
  973.   background: rgba(107,147,255,0.80);
  974.   width: 100%;
  975. }
  976. </style>
  977. <style>
  978. .van-icon {
  979.   font: normal normal normal 36px 'vant-icon' !important;
  980. }
  981. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/99171
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。