From 63aab81fae080f40d265fa00b7c0a3623259812c Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Tue, 19 May 2020 22:37:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=8C=E9=9D=A2=E7=AB=AF=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=AF=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Qrcode.css        | 32 ++++++++++++++++++++++++++++++++
 src/components/app/PartStyles.js | 12 ++++++++++--
 src/utils/util.js                | 15 +++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index 0a06833..fa490ef 100644
--- a/src/components/Qrcode.css
+++ b/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;
diff --git a/src/components/app/PartStyles.js b/src/components/app/PartStyles.js
index 5d5ce6c..14ecadb 100644
--- a/src/components/app/PartStyles.js
+++ b/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}
diff --git a/src/utils/util.js b/src/utils/util.js
index 6e48e5b..a8e9b67 100644
--- a/src/utils/util.js
+++ b/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;