桌面端滚动提示词

This commit is contained in:
ciaochaos 2020-05-19 22:37:56 +08:00
parent 8bf551460a
commit 63aab81fae
3 changed files with 57 additions and 2 deletions

View File

@ -27,6 +27,38 @@
margin-bottom: 0; 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 { .Qr-s {
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;

View File

@ -1,6 +1,14 @@
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import './App.css'; import './App.css';
import StyleListViewer from "../../containers/style/StyleListViewer"; 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 PartStyles = ({ setParamInfo }) => {
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
@ -10,10 +18,10 @@ const PartStyles = ({ setParamInfo }) => {
const styleList = React.createElement(StyleListViewer({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-Centered title-margin">
<div className="Qr-s-title">Styles</div> <div className="Qr-s-title">Styles</div>
<p className="Qr-s-subtitle">点击选择样式</p> <p className="Qr-s-subtitle Qr-rel">点击选择样式<PCMessage/></p>
</div> </div>
<div className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}> <div className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
{styleList} {styleList}

View File

@ -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) { export function getParamDetailedValue(item, paramValue) {
if (item.type == ParamTypes.SELECTOR) return item.choices[paramValue]; if (item.type == ParamTypes.SELECTOR) return item.choices[paramValue];
return paramValue; return paramValue;