Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复选择样式

This commit is contained in:
ciaochaos 2020-05-03 00:52:31 +08:00
parent 2def2652a9
commit 974b5cf7f4
4 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
.idea/workspace.xml
View File

@ -12,8 +12,9 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="78c692f3-8e9f-49c7-86c1-0c5e9d711b1f" name="Default Changelist" comment="静态参数调节组件初步完成"> <list default="true" id="78c692f3-8e9f-49c7-86c1-0c5e9d711b1f" name="Default Changelist" comment="静态参数调节组件初步完成">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/QrItem.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/QrItem.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Qrcode.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/Qrcode.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Qrcode.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.js" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -86,7 +87,8 @@
<workItem from="1588240855414" duration="15673000" /> <workItem from="1588240855414" duration="15673000" />
<workItem from="1588305721761" duration="31311000" /> <workItem from="1588305721761" duration="31311000" />
<workItem from="1588351235673" duration="578000" /> <workItem from="1588351235673" duration="578000" />
<workItem from="1588418867838" duration="2303000" /> <workItem from="1588418867838" duration="3171000" />
<workItem from="1588430156100" duration="2113000" />
</task> </task>
<task id="LOCAL-00001" summary="0.1.0.1"> <task id="LOCAL-00001" summary="0.1.0.1">
<created>1588308749650</created> <created>1588308749650</created>
@ -389,7 +391,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1588423142598</updated> <updated>1588423142598</updated>
</task> </task>
<option name="localTasksCounter" value="44" /> <task id="LOCAL-00044" summary="修复 index.html meta 标签问题">
<created>1588424334244</created>
<option name="number" value="00044" />
<option name="presentableId" value="LOCAL-00044" />
<option name="project" value="LOCAL" />
<updated>1588424334244</updated>
</task>
<option name="localTasksCounter" value="45" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -413,30 +422,38 @@
<MESSAGE value="静态参数调节组件初步完成" /> <MESSAGE value="静态参数调节组件初步完成" />
<MESSAGE value="修复按钮动画、添加指针样式、添加桌面端滑动区域右边距" /> <MESSAGE value="修复按钮动画、添加指针样式、添加桌面端滑动区域右边距" />
<MESSAGE value="新增更多与 footer 静态组件" /> <MESSAGE value="新增更多与 footer 静态组件" />
<option name="LAST_COMMIT_MESSAGE" value="新增更多与 footer 静态组件" /> <MESSAGE value="修复 index.html meta 标签问题" />
<option name="LAST_COMMIT_MESSAGE" value="修复 index.html meta 标签问题" />
</component> </component>
<component name="WindowStateProjectService"> <component name="WindowStateProjectService">
<state x="1161" y="421" key="#Notifications" timestamp="1588307553058"> <state x="1161" y="421" key="#Notifications" timestamp="1588307553058">
<screen x="0" y="23" width="2541" height="1057" /> <screen x="0" y="23" width="2541" height="1057" />
</state> </state>
<state x="1161" y="421" key="#Notifications/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588307553058" /> <state x="1161" y="421" key="#Notifications/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588307553058" />
<state x="877" y="274" key="Vcs.Push.Dialog.v2" timestamp="1588423147735"> <state x="877" y="274" key="Vcs.Push.Dialog.v2" timestamp="1588424337567">
<screen x="0" y="0" width="2560" height="1080" /> <screen x="0" y="0" width="2560" height="1080" />
</state> </state>
<state x="877" y="274" key="Vcs.Push.Dialog.v2/428.1080.1680.1050/0.0.2560.1080/-1600.180.1600.900@0.0.2560.1080" timestamp="1588423147735" /> <state x="877" y="274" key="Vcs.Push.Dialog.v2/428.1080.1680.1050/0.0.2560.1080/-1600.180.1600.900@0.0.2560.1080" timestamp="1588424337567" />
<state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588351718130" /> <state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588351718130" />
<state x="997" y="347" key="git4idea.merge.GitPullDialog" timestamp="1588322703667"> <state x="100" y="100" width="2360" height="880" key="com.intellij.history.integration.ui.views.FileHistoryDialog" timestamp="1588437798150">
<screen x="0" y="23" width="2541" height="1057" /> <screen x="0" y="0" width="2560" height="1080" />
</state> </state>
<state x="100" y="100" width="2360" height="880" key="com.intellij.history.integration.ui.views.FileHistoryDialog/428.1080.1680.1050/0.0.2560.1080/-1600.180.1600.900@0.0.2560.1080" timestamp="1588437798150" />
<state x="1004" y="331" key="git4idea.merge.GitPullDialog" timestamp="1588436573499">
<screen x="0" y="0" width="2560" height="1080" />
</state>
<state x="1004" y="331" key="git4idea.merge.GitPullDialog/428.1080.1680.1050/0.0.2560.1080/-1600.180.1600.900@0.0.2560.1080" timestamp="1588436573499" />
<state x="997" y="347" key="git4idea.merge.GitPullDialog/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588322703667" /> <state x="997" y="347" key="git4idea.merge.GitPullDialog/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588322703667" />
<state x="1092" y="452" key="git4idea.remote.GitConfigureRemotesDialog" timestamp="1588308606948"> <state x="1092" y="452" key="git4idea.remote.GitConfigureRemotesDialog" timestamp="1588308606948">
<screen x="0" y="23" width="2541" height="1057" /> <screen x="0" y="23" width="2541" height="1057" />
</state> </state>
<state x="1092" y="452" key="git4idea.remote.GitConfigureRemotesDialog/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588308606948" /> <state x="1092" y="452" key="git4idea.remote.GitConfigureRemotesDialog/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588308606948" />
<state x="935" y="238" key="run.anything.popup" timestamp="1588423828879"> <state x="956" y="201" key="run.anything.popup" timestamp="1588436561285">
<screen x="0" y="23" width="2541" height="1057" /> <screen x="0" y="0" width="2560" height="1080" />
</state> </state>
<state x="935" y="256" key="run.anything.popup/-1600.203.1600.877/428.1103.1680.1027/0.23.2560.1057@0.23.2560.1057" timestamp="1588250759548" /> <state x="935" y="256" key="run.anything.popup/-1600.203.1600.877/428.1103.1680.1027/0.23.2560.1057@0.23.2560.1057" timestamp="1588250759548" />
<state x="935" y="238" key="run.anything.popup/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588423828879" /> <state x="956" y="201" key="run.anything.popup/428.1080.1680.1050/0.0.2560.1080/-1600.180.1600.900@0.0.2560.1080" timestamp="1588436561285" />
<state x="942" y="220" key="run.anything.popup/428.1103.1680.1027/0.0.2541.1080/-1600.203.1600.877@0.0.2541.1080" timestamp="1588424479342" />
<state x="949" y="220" key="run.anything.popup/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588430476464" />
</component> </component>
</project> </project>

8
src/components/QrItem.js
View File

@ -9,8 +9,8 @@ function calViewBox(props) {
} }
function calClassName(props) { function calClassName(props) {
if (props.selected == true) return 'Qr-item-image Qr-item-image-selected'; if (props.selected == true) return 'Qr-item Qr-item-selected';
return 'Qr-item-image'; return 'Qr-item';
} }
class QrItem extends React.Component { class QrItem extends React.Component {
@ -29,8 +29,8 @@ class QrItem extends React.Component {
render() { render() {
return ( return (
<div className="Qr-item" onClick={this.handleClick}> <div className={calClassName(this.props)} onClick={this.handleClick}>
<div className={calClassName(this.props)}> <div className="Qr-item-image">
<div className="Qr-item-image-inner"> <div className="Qr-item-image-inner">
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"> <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white">
{this.props.renderer} {this.props.renderer}

10
src/components/Qrcode.css
View File

@ -108,12 +108,16 @@
} }
} }
.Qr-item-image-selected { .Qr-item-selected .Qr-item-image {
border-color: #44D7B6 !important; border-color: #44D7B6 !important;
} }
.Qr-item:hover .Qr-item-image { .Qr-item-selected .Qr-item-image-inner {
border-color: #44D7B6; opacity: 1;
}
.Qr-item-selected .Qr-item-detail {
color: #000000;
} }
.Qr-item:hover .Qr-item-image-inner { .Qr-item:hover .Qr-item-image-inner {

3
src/components/Qrcode.js
View File

@ -49,7 +49,7 @@ class Qrcode extends React.Component {
if (text.length > 0) if (text.length > 0)
this.setState({options: {text: text}, qrcode: getQrcodeData({text: text})}); this.setState({options: {text: text}, qrcode: getQrcodeData({text: text})});
else { else {
text = 'http://qrbtf.com/'; text = 'https://qrbtf.com/';
this.setState({text: text, options: {text: text}, qrcode: getQrcodeData({text: text})}); this.setState({text: text, options: {text: text}, qrcode: getQrcodeData({text: text})});
} }
e.target.blur(); e.target.blur();
@ -81,6 +81,7 @@ class Qrcode extends React.Component {
getStyleList().map((style) => { getStyleList().map((style) => {
return <QrItem return <QrItem
value={style.value} value={style.value}
key={style.value}
qrcode={this.state.qrcode} qrcode={this.state.qrcode}
renderer={style.renderer} renderer={style.renderer}
selected={style.value == this.state.selected} selected={style.value == this.state.selected}