按钮动态

src/components/LiquidHandle.vue

@@ -16,7 +16,7 @@
       <div
         :class="
           operatorStore.replenishingFluidsWorkState
-            ? 'btn mr active'
+            ? 'btn mr active style-btn'
             : 'btn mr '
         "
         v-if="tabType == 1"
@@ -26,7 +26,9 @@
       </div>
       <div
         :class="
-          operatorStore.replenishingFluidsWorkState ? 'btn' : 'btn active'
+          operatorStore.replenishingFluidsWorkState
+            ? 'btn'
+            : 'btn active style-btn'
         "
         v-if="tabType == 1"
         @click="startAdd"
@@ -34,14 +36,20 @@
         开始加液
       </div>
       <div
-        :class="operatorStore.drainingWorkState ? 'btn mr active' : 'btn mr '"
+        :class="
+          operatorStore.drainingWorkState
+            ? 'btn mr active style-btn'
+            : 'btn mr '
+        "
         v-if="tabType == 2"
         @click="stopPop"
       >
         停止排液
       </div>
       <div
-        :class="operatorStore.drainingWorkState ? 'btn' : 'btn active'"
+        :class="
+          operatorStore.drainingWorkState ? 'btn' : 'btn active style-btn'
+        "
         v-if="tabType == 2"
         @click="startTabLiquid"
       >

src/components/LoginForm.vue

@@ -17,7 +17,7 @@
       id="txtPassword"
       placeholder="请输入设备密码"
     />
-    <div class="login_btn" @click="handleLogin"></div>
+    <div class="login_btn style-btn" @click="handleLogin"></div>
   </div>
 </template>
 

src/components/Operator.vue

@@ -49,7 +49,7 @@
         :class="
           [1, 2].includes(operatorStore.disinfectStatus)
             ? 'start cant'
-            : 'start'
+            : 'start style-btn'
         "
         @click="startDisinfect"
       >
@@ -312,6 +312,8 @@ onUnmounted(() => {
       font-weight: normal;
       letter-spacing: 0.1em;
       color: #ffffff;
+      position: relative;
+      overflow: hidden;
     }
     .cant {
       background: #f4f4f4;

src/components/Setting/components/Admin.vue

@@ -62,7 +62,7 @@
       <p class="update_tip">{{ updateTip }}</p>
     </div>
     <div class="btn_wrap">
-      <div class="btn" @click="handleUpdatePassword">修改</div>
+      <div class="btn style-btn" @click="handleUpdatePassword">修改</div>
     </div>
     <div class="key_wrap" v-if="showkeyboard">
       <SimpleKeyboard

src/components/Setting/components/Date.vue

@@ -3,12 +3,12 @@
     <div class="row_wrap">
       <p class="title">当前日期</p>
       <p class="num">{{ settingStore.currentDate.join('-') }}</p>
-      <div class="btn" @click="showDatePicker">设置</div>
+      <div class="btn style-btn" @click="showDatePicker">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">当前时间</p>
       <p class="num">{{ settingStore.currentTime.join(':') }}</p>
-      <div class="btn" @click="showTimePicker">设置</div>
+      <div class="btn style-btn" @click="showTimePicker">设置</div>
     </div>
     <DatePicker v-if="datePickerVisible" :hideDatePicker="hideDatePicker" />
     <TimePicker v-if="timePickerVisible" :hideTimePicker="hideTimePicker" />

src/components/Setting/components/Device.vue

@@ -13,7 +13,7 @@
           @touchstart.stop="hideClickKey(1)"
         />
       </p>
-      <div class="btn" @click="setAddliquidVal">设置</div>
+      <div class="btn style-btn" @click="setAddliquidVal">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">喷液蠕动泵(/g)</p>
@@ -28,7 +28,7 @@
           @touchstart.stop="hideClickKey(2)"
         />
       </p>
-      <div class="btn" @click="setSprayLiquidVal">设置</div>
+      <div class="btn style-btn" @click="setSprayLiquidVal">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢溶度(/ppm)</p>
@@ -43,7 +43,7 @@
           @touchstart.stop="hideClickKey(3)"
         />
       </p>
-      <div class="btn" @click="setStopedGsVal">设置</div>
+      <div class="btn style-btn" @click="setStopedGsVal">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢溶度(/ppm)</p>
@@ -58,7 +58,7 @@
           @touchstart.stop="hideClickKey(4)"
         />
       </p>
-      <div class="btn" @click="setcontinuedGsVal">设置</div>
+      <div class="btn style-btn" @click="setcontinuedGsVal">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
@@ -73,7 +73,7 @@
           @touchstart.stop="hideClickKey(5)"
         />
       </p>
-      <div class="btn" @click="setstopedSaturVal">设置</div>
+      <div class="btn style-btn" @click="setstopedSaturVal">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
@@ -88,7 +88,7 @@
           @touchstart.stop="hideClickKey(6)"
         />
       </p>
-      <div class="btn" @click="setContinuedSaturVal">设置</div>
+      <div class="btn style-btn" @click="setContinuedSaturVal">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">允许消毒最大湿度(%RH)</p>
@@ -103,7 +103,7 @@
           @touchstart.stop="hideClickKey(7)"
         />
       </p>
-      <div class="btn" @click="setMaxHumidityVal">设置</div>
+      <div class="btn style-btn" @click="setMaxHumidityVal">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">预热时间(s)</p>
@@ -117,7 +117,7 @@
           @touchstart.stop="hideClickKey(8)"
         />
       </p>
-      <div class="btn" @click="setHeat_timeVal">设置</div>
+      <div class="btn style-btn" @click="setHeat_timeVal">设置</div>
     </div>
     <van-number-keyboard
       v-model="addLiquidConfigVal"

src/components/Setting/components/User.vue

@@ -17,8 +17,8 @@
         <p class="password_tips">*用户名限制信息</p>
       </div>
       <div class="btns">
-        <div class="btn" @click="returnList">返回</div>
-        <div class="btn">添加</div>
+        <div class="btn style-btn" @click="returnList">返回</div>
+        <div class="btn style-btn">添加</div>
       </div>
     </div>
     <div v-else-if="changePasswordVisible" class="change_password_form">
@@ -84,23 +84,26 @@
         >
           <p class="username">{{ item.uid }}</p>
           <div class="operator_wrap">
-            <div class="btn" @click="showUserModal(`${item.uid} 用户删除`)">
+            <div
+              class="btn style-btn"
+              @click="showUserModal(`${item.uid} 用户删除`)"
+            >
               删除用户
             </div>
             <div
-              class="btn mb"
+              class="btn mb style-btn"
               @click="showUserModal(`${item.uid} 设置为管理员`)"
             >
               设为管理员
             </div>
-            <div class="btn" @click="showUpdatePassword(item.uid)">
+            <div class="btn style-btn" @click="showUpdatePassword(item.uid)">
               修改密码
             </div>
           </div>
         </div>
       </div>
       <div class="btn_wrap">
-        <div class="add_user" @click="addUserFormShow">新增用户</div>
+        <div class="add_user style-btn" @click="addUserFormShow">新增用户</div>
       </div>
     </div>
     <UserModal

src/components/Setting/index.vue

@@ -4,22 +4,22 @@
       <div class="tab_wrap">
         <p class="active_line" v-show="activeTab == 1"></p>
         <p :class="activeTab == 1 ? 'title active' : 'title'">设备参数配置</p>
-        <div class="btn" @click="changeActiveTab(1)">配置</div>
+        <div class="btn style-btn" @click="changeActiveTab(1)">配置</div>
       </div>
       <div class="tab_wrap">
         <p class="active_line" v-show="activeTab == 2"></p>
         <p :class="activeTab == 2 ? 'title active' : 'title'">修改管理员密码</p>
-        <div class="btn" @click="changeActiveTab(2)">修改</div>
+        <div class="btn style-btn" @click="changeActiveTab(2)">修改</div>
       </div>
       <div class="tab_wrap">
         <p class="active_line" v-show="activeTab == 3"></p>
         <p :class="activeTab == 3 ? 'title active' : 'title'">用户管理</p>
-        <div class="btn" @click="changeActiveTab(3)">管理</div>
+        <div class="btn style-btn" @click="changeActiveTab(3)">管理</div>
       </div>
       <div class="tab_wrap">
         <p class="active_line" v-show="activeTab == 4"></p>
         <p :class="activeTab == 4 ? 'title active' : 'title'">日期/时间设置</p>
-        <div class="btn" @click="changeActiveTab(4)">配置</div>
+        <div class="btn style-btn" @click="changeActiveTab(4)">配置</div>
       </div>
     </div>
     <div class="right_container">

src/components/dialogs/DatePicker.vue

@@ -40,8 +40,8 @@
         />
       </div>
       <div class="btns">
-        <div class="cancel" @click="handleCancel">取消</div>
-        <div class="ok" @click="selectDate">确定</div>
+        <div class="cancel style-btn" @click="handleCancel">取消</div>
+        <div class="ok style-btn" @click="selectDate">确定</div>
       </div>
     </div>
   </div>

src/components/dialogs/LiquidModal.vue

@@ -25,8 +25,8 @@
         并确认<span class="red">容器是否大于</span>排出液体容积
       </p>
       <div class="btns">
-        <div class="ok" @click="tapLiquid">确定</div>
-        <div class="cancel" @click="cancelTap">取消</div>
+        <div class="ok style-btn" @click="tapLiquid">确定</div>
+        <div class="cancel style-btn" @click="cancelTap">取消</div>
       </div>
     </div>
   </div>

src/components/dialogs/LogPicker.vue

@@ -11,7 +11,7 @@
           v-model="selectedValues"
         />
       </div>
-      <div class="ok_btn" @click="chooseLog">确定</div>
+      <div class="ok_btn style-btn" @click="chooseLog">确定</div>
     </div>
   </div>
 </template>

src/components/dialogs/TimePicker.vue

@@ -39,8 +39,8 @@
         />
       </div>
       <div class="btns">
-        <div class="cancel" @click="handleCancel">取消</div>
-        <div class="ok" @click="selectTime">确定</div>
+        <div class="cancel style-btn" @click="handleCancel">取消</div>
+        <div class="ok style-btn" @click="selectTime">确定</div>
       </div>
     </div>
   </div>

src/components/dialogs/UserModal.vue

@@ -22,8 +22,8 @@
         请确认是否将 <span class="red">{{ userWarnInfo }}</span>
       </p>
       <div class="btns">
-        <div class="ok">确定</div>
-        <div class="cancel" @click="handleCancel">取消</div>
+        <div class="ok style-btn">确定</div>
+        <div class="cancel style-btn" @click="handleCancel">取消</div>
       </div>
     </div>
   </div>

src/components/dialogs/WarnModal.vue

@@ -23,8 +23,8 @@
       </p>
       <p class="warn_code">203</p>
       <div class="btns">
-        <div class="ok">确定</div>
-        <div class="cancel">忽略</div>
+        <div class="ok style-btn">确定</div>
+        <div class="cancel style-btn">忽略</div>
       </div>
     </div>
   </div>

src/pages/Home.vue

@@ -2,7 +2,9 @@
   <div class="home_container">
     <div class="header_menu">
       <div
-        :class="activeTab == 1 ? 'tab_btn active_btn' : 'tab_btn'"
+        :class="
+          activeTab == 1 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
+        "
         @click="changeTab(1)"
       >
         <svg
@@ -25,7 +27,9 @@
         <p class="text">消毒</p>
       </div>
       <div
-        :class="activeTab == 2 ? 'tab_btn active_btn' : 'tab_btn'"
+        :class="
+          activeTab == 2 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
+        "
         @click="changeTab(2)"
         v-if="operatorStore.disinfectStatus != 1"
       >
@@ -49,7 +53,9 @@
         <p class="text">加液</p>
       </div>
       <div
-        :class="activeTab == 3 ? 'tab_btn active_btn' : 'tab_btn'"
+        :class="
+          activeTab == 3 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
+        "
         @click="changeTab(3)"
         v-if="operatorStore.disinfectStatus != 1"
       >
@@ -73,7 +79,9 @@
         <p class="text">排液</p>
       </div>
       <div
-        :class="activeTab == 4 ? 'tab_btn active_btn' : 'tab_btn'"
+        :class="
+          activeTab == 4 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
+        "
         @click="changeTab(4)"
         v-if="
           userStore.loginUserPermission != 3 &&
@@ -100,7 +108,9 @@
         <p class="text">测试</p>
       </div>
       <div
-        :class="activeTab == 5 ? 'tab_btn active_btn' : 'tab_btn'"
+        :class="
+          activeTab == 5 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
+        "
         @click="changeTab(5)"
         v-if="
           userStore.loginUserPermission != 3 &&
@@ -146,7 +156,7 @@
     <div class="other_info">
       <p>IP {{ settingStore.deviceIp }}</p>
       <p class="time">{{ nowTime }}</p>
-      <div class="log_out_btn" @click="handleLogout">
+      <div class="log_out_btn style-btn" @click="handleLogout">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"

src/style.scss

@@ -38,3 +38,26 @@ body {
   width: 0;
   height: 0;
 }
+
+// btn hover样式
+.style-btn {
+  position: relative;
+  overflow: hidden;
+}
+.style-btn:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -36px;
+  left: -100px;
+  background: white;
+  width: 50px;
+  height: 155px;
+  opacity: 20%;
+  transform: rotate(-45deg);
+}
+.style-btn:hover:before {
+  left: 160%;
+  transition: all 1500ms cubic-bezier(0.3, 1, 0.2, 1);
+  -webkit-transition: all 1500ms cubic-bezier(0.3, 1, 0.2, 1);
+}