禁止首页文字复制等操作

src/views/Home/index.vue

@@ -8,7 +8,7 @@
         <img src="~@/assets/img/nuoma_icon.png" class="logo">
         <div class="title">挪码科技</div>
       </div> -->
-      <div class="title">互联网+智慧收银</div>
+      <div class="title no_select">互联网+智慧收银</div>
       <div class="qrcode" v-if="qrcode">
         <img :src="qrcode" class="code">
       </div>
@@ -16,24 +16,24 @@
         <img src="~@/assets/img/qrcode.png" class="code">
         <div class="code_info flex-c">
           <van-icon class="code_icon" name="warning-o" />
-          <span>已失效</span>
+          <span class="no_select">已失效</span>
         </div>
       </div>
-      <div class="qrcode_title flex-c">微信扫码登录</div>
-      <div class="banner_msg flex-c">24H&emsp;智能超市</div>
-      <div class="banner_msg flex-c">自动售货平台</div>
+      <div class="qrcode_title no_select flex-c">微信扫码登录</div>
+      <div class="banner_msg no_select flex-c">24H&emsp;智能超市</div>
+      <div class="banner_msg no_select flex-c">自动售货平台</div>
     </div>
 
     <div class="footer">
-      <div class="footer_title flex-c">开始自助结账</div>
-      <div class="footer_subtitle flex-c">请将商品条码对准扫码口</div>
+      <div class="footer_title no_select flex-c">开始自助结账</div>
+      <div class="footer_subtitle no_select flex-c">请将商品条码对准扫码口</div>
       <div class="footer_info">
-        <span class="info_tag">购物券使用须知</span>
-        <div class="info">超市提货券仅限在超市线下门店使用。使用时，向店员出示提货券，店员会进行验证并完成兑换。在使用前确认提货券的有效期限和使用范围。提货券一般不支持退换货，请谨慎使用。</div>
+        <span class="info_tag no_select">购物券使用须知</span>
+        <div class="info no_select">超市提货券仅限在超市线下门店使用。使用时，向店员出示提货券，店员会进行验证并完成兑换。在使用前确认提货券的有效期限和使用范围。提货券一般不支持退换货，请谨慎使用。</div>
       </div>
       <div class="footer_info">
-        <span class="info_tag">退货退款流程</span>
-        <div class="info">如有商品问题需退款。请保留购物小票和退货商品，找购物门店工作人员，出示小票，出示退货商品，办理退货流程。</div>
+        <span class="info_tag no_select">退货退款流程</span>
+        <div class="info no_select">如有商品问题需退款。请保留购物小票和退货商品，找购物门店工作人员，出示小票，出示退货商品，办理退货流程。</div>
       </div>
     </div>
 
@@ -41,22 +41,22 @@
 
     <van-dialog v-model:show="visible" :show-cancel-button="false" :show-confirm-button="false">
       <div class="identity">
-        <div class="identity_title flex-c">确认身份</div>
+        <div class="identity_title no_select flex-c">确认身份</div>
 
         <div class="avatar_box flex-c">
           <img v-if="userInfo" class="avatar" :src="userInfo.avatar">
           <img v-else class="avatar" src="~@/assets/img/user.png">
 
-          <div v-if="userInfo" class="userName">{{ userInfo.userName }}</div>
-          <div v-else class="userName">游客</div>
+          <div v-if="userInfo" class="userName no_select">{{ userInfo.userName }}</div>
+          <div v-else class="userName no_select">游客</div>
 
           <div v-if="userInfo" class="userName">{{ userInfo.mobile }}</div>
 
         </div>
 
         <div class="btn_box flex-b">
-          <div class="submit flex-c" @click="cancle">取消（{{cancleCount}}）</div>
-          <div class="submit flex-c" @click="goLogin">确定</div>
+          <div class="submit no_select flex-c" @click="cancle">取消（{{cancleCount}}）</div>
+          <div class="submit no_select flex-c" @click="goLogin">确定</div>
         </div>
       </div>
     </van-dialog>
@@ -327,7 +327,15 @@ export default {
         }
       }
     }
-  }
+
+    /* 禁止所有子元素的文本被选择 */
+    .no_select {
+        user-select: none; /* 标准语法 */
+        -webkit-user-select: none; /* Safari */
+        -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+    }
+}
 .van-dialog {
   border-radius: 0px;
 }
@@ -385,6 +393,7 @@ export default {
     .submit:nth-child(1) {
       background: rgb(233, 233, 233);
       color: rgb(51, 51, 51);
-    }    }
+    }    
+  }
 }
 </style>
\ No newline at end of file