桌面端滚动提示词

src/components/Qrcode.css

@@ -27,6 +27,38 @@
     margin-bottom: 0;
 }
 
+.Qr-rel {
+    position: relative;
+}
+
+.Qr-style-hint {
+    opacity: 0;
+    font-size: 12px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    -webkit-transition-timing-function: ease-in-out;
+    -moz-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -webkit-transition-duration: 0.3s; /* Safari */
+    -moz-animation-duration: 0.3s;
+    transition-duration: 0.3s;
+}
+
+#Qr-style:hover .Qr-style-hint {
+    opacity: 0.6;
+    -webkit-transition-duration: 0.2s; /* Safari */
+    -moz-animation-duration: 0.2s;
+    transition-duration: 0.2s;
+}
+
+@media (min-width: 500px) {
+    .Qr-style-hint {
+        font-size: 14px;
+    }
+}
+
 .Qr-s {
     overflow-x: scroll;
     overflow-y: hidden;

src/components/app/PartStyles.js

@@ -1,6 +1,14 @@
 import React, {useEffect, useState} from 'react';
 import './App.css';
 import StyleListViewer from "../../containers/style/StyleListViewer";
+import {isPC} from "../../utils/util";
+
+const PCMessage = () => {
+    if (isPC()) {
+        return <div className="Qr-style-hint">按住 shift 滚动</div>
+    }
+    return null
+}
 
 const PartStyles = ({ setParamInfo }) => {
     const [loaded, setLoaded] = useState(false);
@@ -10,10 +18,10 @@ const PartStyles = ({ setParamInfo }) => {
 
     const styleList = React.createElement(StyleListViewer({setParamInfo}))
 
-    return (<div className="Qr-titled">
+    return (<div className="Qr-titled" id="Qr-style">
         <div className="Qr-Centered title-margin">
             <div className="Qr-s-title">Styles</div>
-            <p className="Qr-s-subtitle">点击选择样式</p>
+            <p className="Qr-s-subtitle Qr-rel">点击选择样式<PCMessage/></p>
         </div>
         <div className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
             {styleList}

src/utils/util.js

@@ -47,6 +47,21 @@ export function isWeiXin(){
     }
 }
 
+export function isPC() {
+    const userAgentInfo = navigator.userAgent;
+    const Agents = ["Android", "iPhone",
+        "SymbianOS", "Windows Phone",
+        "iPad", "iPod"];
+    let flag = true;
+    for (let v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            flag = false;
+            break;
+        }
+    }
+    return flag;
+}
+
 export function getParamDetailedValue(item, paramValue) {
     if (item.type == ParamTypes.SELECTOR) return item.choices[paramValue];
     return paramValue;