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
点击选择样式
+点击选择样式