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
按住 shift 滚动
+ } + return null +} const PartStyles = ({ setParamInfo }) => { const [loaded, setLoaded] = useState(false); @@ -10,10 +18,10 @@ const PartStyles = ({ setParamInfo }) => { const styleList = React.createElement(StyleListViewer({setParamInfo})) - return (
+ return (
Styles
-

点击选择样式

+

点击选择样式

{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;