From af6b6192ff8f8f31d4b299ed46429b657985f51b Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Tue, 19 Mar 2024 17:36:53 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/Header.js | 125 +++-- src/layout/header.less | 14 +- src/routes/Home.js | 1002 ++++++++++++++++++-------------------- src/routes/dashboard.css | 26 + 4 files changed, 602 insertions(+), 565 deletions(-) diff --git a/src/layout/Header.js b/src/layout/Header.js index bc78797..c3699ea 100644 --- a/src/layout/Header.js +++ b/src/layout/Header.js @@ -1,7 +1,7 @@ import React, { useState, useMemo } from "react"; import { connect } from "dva"; import { withRouter } from "dva/router"; -import { Dropdown, Icon, Menu, message, Button, Modal } from "antd"; +import { Dropdown, Icon, Menu, message, Button, Modal, Input } from "antd"; import { HeaderSearch as OPTSearch, PictureThumb } from "@woowalker/feui"; import ModifyPassword from "../components/MainPage/ModifyPassword"; import FoUserInfoShow from "../components/MainPage/FoUserInfoShow"; @@ -13,15 +13,15 @@ import config from "../config"; import "./header.less"; import Option from "./Option"; - // 投屏 const DataV = (props) => { const navTo = () => { const { OrgId, Tenant, baseConfig } = props.login; const preUrl = baseConfig.SCREEN_URL || config.dataVUrl; const queryStr = `OrgId=${OrgId}&Tenant=${Tenant}`; - const url = `${preUrl.indexOf("?") !== -1 ? preUrl : preUrl + "?" - }${queryStr}`; + const url = `${ + preUrl.indexOf("?") !== -1 ? preUrl : preUrl + "?" + }${queryStr}`; window.open(url, "_blank"); }; return ( @@ -33,8 +33,9 @@ const DataV = (props) => { const HeaderDataV = connect(({ login }) => ({ login }))(DataV); // 搜索 -const Search = (props) => { +const SearchBox = (props) => { const [autoCompleteData, setAutoCompleteData] = useState([]); + const [inputVal, setInputVal] = useState(""); const leafMenus = useMemo(() => { const menuForms = []; @@ -66,16 +67,17 @@ const Search = (props) => { * @param {*} e */ const handleSearchMenu = (e) => { - if (!e || e === "") { + setInputVal(e.target.value); + if (!e.target.value || e.target.value === "") { setAutoCompleteData([]); return; } const validResult = []; leafMenus.menuForms.forEach((item) => { if ( - item.CODE.toLowerCase().indexOf(e.toLowerCase()) >= 0 || - item.NAME.toLowerCase().indexOf(e.toLowerCase()) >= 0 || - item.MenuName.toLowerCase().indexOf(e.toLowerCase()) >= 0 + item.CODE.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0 || + item.NAME.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0 || + item.MenuName.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0 ) { validResult.push(item); } @@ -87,6 +89,36 @@ const Search = (props) => { * 选中菜单 * @param {*} e */ + + const overMenu = () => { + if (autoCompleteData.length == 0) { + return ( + + 暂无匹配项 + + ); + } else { + return ( + + {autoCompleteData.map((item, index) => { + return ( + { + handleSelectMenu(item.ID); + }} + > + {item.NAME}({item.CODE}) + + ); + })} + + ); + } + }; const handleSelectMenu = (e) => { const menu = leafMenus.menuDatas.find( (item) => item.Menu.Nav_MenuForm.ID === e @@ -99,17 +131,48 @@ const Search = (props) => { }, }); props.history.push({ pathname: `/main/${menu.Node.ID}` }); + setInputVal(""); + setAutoCompleteData([]) }; - if (window.navigator.userAgent.indexOf("Windows") < 1) { return ; } else { return ( - + // + // + +
+ {/* */} + } + onChange={(e) => { + handleSearchMenu(e); + }} + onPressEnter={(e) => { + handleSearchMenu(e); + }} + value={inputVal} + /> +
+ ); } //return ( @@ -121,7 +184,7 @@ const Search = (props) => { // /> //) }; -const HeaderSearch = withRouter(connect(({ login }) => ({ login }))(Search)); +const HeaderSearch = withRouter(connect(({ login }) => ({ login }))(SearchBox)); // 个人中心 const User = (props) => { @@ -226,14 +289,11 @@ const GuideCodePage = (props) => {
{ - currVans() + currVans(); }} style={{ margin: "0px 36px", display: "flex", alignItems: "center" }} > - +
{
- ); } }; @@ -277,7 +336,7 @@ const NavOpton = (props) => { {/* */} ) : ( 矿山安全生产标准化系统 （SMS） @@ -338,15 +398,16 @@ function Header(props) { {!props.matchLogin ? (
- - + + + {/* style={{"color":"#f3eded"}} */} - - + {/* */} + {/* {props.login.user.NAME}({props.login.user.CODE}) - + */}
) : null} diff --git a/src/layout/header.less b/src/layout/header.less index 064cf6e..0eb6de5 100644 --- a/src/layout/header.less +++ b/src/layout/header.less @@ -13,6 +13,18 @@ .ant-modal { padding-bottom: 0; } + .headerInput { + .ant-input { + border: 1px solid #fff; + height: 38px; + } + .ant-input-affix-wrapper .ant-input:not(:first-child) { + padding-left: 40px; + } + .ant-input::placeholder { + color: #909399; + } + } .@{header-prefix} { // width: 100%; @@ -72,7 +84,7 @@ &-icon { font-size: 22px !important; - color: #606266 !important; //f3eded + color: #909399 !important; //f3eded cursor: pointer; } diff --git a/src/routes/Home.js b/src/routes/Home.js index 1e83d87..8e2f1d3 100644 --- a/src/routes/Home.js +++ b/src/routes/Home.js @@ -14,54 +14,129 @@ import { import "./home.less"; // 组件库 import { - Table, - Modal, Row, Col, Icon, Progress, Tabs, - Button, - Input, - DatePicker, - Form, - Select, - notification, - Popconfirm, - Divider, - Space, - Descriptions, message, - Carousel, + Dropdown, + Menu, + Empty, } from "antd"; -import FormPage from "../components/FormPage"; -import backlog from "../assets/home/backlog.png"; -import backlog_i from "../assets/home/backlog_icon.png"; import styles from "./dashboard.css"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; -import moment from "moment"; -import flow from "../assets/home/flow.png"; -import flow_i from "../assets/home/remind_icon.png"; -import finished from "../assets/home/finished.png"; -import finished_i from "../assets/home/finished_icon.png"; -import remind from "../assets/home/remind.png"; -import remind_i from "../assets/home/red-err.png"; import echarts from "echarts"; import config from "../config"; -import Toggle from "./toggle"; -import RisiLevel from "../components/MainPage/RiskLevel"; -import ClassCompletion from "../components/MainPage/ClassCompletion"; -import WorkTicket from "../components/MainPage/WorkTicket"; -import MonthDanger from "../components/MainPage/MonthDanger"; -import SafeCheck from "../components/MainPage/SafeCheck"; +import ModifyPassword from "../components/MainPage/ModifyPassword"; +import FoUserInfoShow from "../components/MainPage/FoUserInfoShow"; const { TabPane } = Tabs; +const WorkBench = (props) => { + return ( +
+ {props.data.map((item, index) => { + const result = + (Date.parse(item.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000; + const prepare = result > 0 ? "正常" : "超期"; + const warning = + item.NOTICE_STATUS == 0 + ? "未读" + : item.NOTICE_STATUS == 3 + ? "已读" + : "已办"; + const type = props.index == 1 || props.index == 2 ? prepare : warning; + + return ( +
+
+ {type} +
+ +
+ {item.NOTICE_TITLE} +
+
+ 开始时间：{item.TASK_STARTDT} +
+
+ 结束时间：{item.TASK_ENDDT} +
+ {/*
+ 发起人：{item.person} +
*/} +
+ ); + })} +
+ ); +}; +const UserInfo = (props) => { + return ( +
+
+ +
{props.title}
+
+
+ {props.data} +
+
+ ); +}; class Home extends React.Component { constructor(props) { super(props); this.state = { - roleType: 0, + visible: false, + userInfo: "", + timeNow: "上午好", + workData: [], + workTotal:'', completeName: [ { name: "张森友", @@ -96,134 +171,6 @@ class Home extends React.Component { value: 43, }, ], - prepareJob: [ - { - person: "阮保级", - content: "手动隐患上报-指定责任单位", - data: "2023-06-08 03:38", - type: "超期", //0超期 1正常 2已办 3未读 4已读 - }, - { - person: "张建华", - content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批", - data: "2023-03-08 04:38", - type: "正常", - }, - { - person: "李国富", - content: "纠正与预防措施通知单", - data: "2023-05-08 03:28", - type: "超期", - }, - { - person: "王思涵", - content: "公司级例行检查任务表", - data: "2023-06-28 14:38", - type: "正常", - }, - { - person: "赵武娣", - content: "公司级库区检查指定表", - data: "2023-10-08 23:38", - type: "超期", - }, - ], - overtimeJob: [ - { - person: "阮保级", - content: "手动隐患上报-指定责任单位", - data: "2023-06-08 03:38", - type: "超期", //0超期 1正常 2已办 3未读 4已读 - }, - { - person: "张建华", - content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批", - data: "2023-03-08 04:38", - type: "超期", - }, - { - person: "李国富", - content: "纠正与预防措施通知单", - data: "2023-05-08 03:28", - type: "超期", - }, - { - person: "王思涵", - content: "公司级例行检查任务表", - data: "2023-06-28 14:38", - type: "超期", - }, - { - person: "赵武娣", - content: "公司级库区检查指定表", - data: "2023-10-08 23:38", - type: "超期", - }, - ], - overJob: [ - { - person: "阮保级", - content: "手动隐患上报-指定责任单位", - data: "2023-06-08 03:38", - type: "已办", //0超期 1正常 2已办 3未读 4已读 - }, - { - person: "张建华", - content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批", - data: "2023-03-08 04:38", - type: "正常", - }, - { - person: "李国富", - content: "纠正与预防措施通知单", - data: "2023-05-08 03:28", - type: "已办", - }, - { - person: "王思涵", - content: "公司级例行检查任务表", - data: "2023-06-28 14:38", - type: "已办", - }, - { - person: "赵武娣", - content: "公司级库区检查指定表", - data: "2023-10-08 23:38", - type: "正常", - }, - ], - noticeJob: [ - { - person: "阮保级", - content: "手动隐患上报-指定责任单位", - data: "2023-06-08 03:38", - type: "未读", //0超期 1正常 2已办 3未读 4已读 - }, - { - person: "张建华", - content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批", - data: "2023-03-08 04:38", - type: "已读", - }, - { - person: "李国富", - content: "纠正与预防措施通知单", - data: "2023-05-08 03:28", - type: "未读", - }, - { - person: "王思涵", - content: "公司级例行检查任务表", - data: "2023-06-28 14:38", - type: "已办", - }, - { - person: "赵武娣", - content: "公司级库区检查指定表", - data: "2023-10-08 23:38", - type: "已读", - }, - ], }; } @@ -232,6 +179,8 @@ class Home extends React.Component { window.location.replace(config.guideH5Host); //alert('手机'); } + this.getBaseData(1, "1", 5); + this.timeJudg(); this.riskLevel(); // this.homeRound(); this.completeRate(); @@ -240,6 +189,61 @@ class Home extends React.Component { this.dangerChange(); this.getUser(); } + tabsCallback = (key) => { + if (key == 1) { + this.getBaseData(1, "1", 5); + } else if (key == 2) { + this.getBaseData(1, "4", 5); + } else if (key == 3) { + this.getBaseData(1, "2", 5); + } else { + this.getBaseData(1, "3", 5); + } + }; + getBaseData = (pagination, key, limit) => { + const current = pagination ? pagination.current : 1; + const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current); + //extendRule(json, "NOTICE_STATUS", 1, 0); + json.Limit = limit; + //json.Limit = 10; + json.Parameter1 = key; //1待办事项2已办事项3今日新增4待办超时 + + this.props.dispatch({ + type: "app/getDataByPost", + url: "FM/FMNotificationTask/HomeOrderPaged", + payload: json, + onlyData: false, + onComplete: (ret) => { + if (ret && ret.IsSuccessful && ret.Data.newData) { + this.setState({ + workData: ret.Data.newData, + workTotal: ret.Data, + }); + } + }, + }); + }; + timeJudg = () => { + let time = new Date(); + let hour = time.getHours(); + if (hour >= 6 && hour <= 11) { + this.setState({ + timeNow: "上午好", + }); + } else if (hour > 11 && hour <= 13) { + this.setState({ + timeNow: "中午好", + }); + } else if (hour > 13 && hour <= 18) { + this.setState({ + timeNow: "下午好", + }); + } else { + this.setState({ + timeNow: "晚上好", + }); + } + }; getUser = () => { var userId = storage("lacal").getItem("userid")?.val; //登录后有存储登录信息 var orgId = storage("lacal").getItem("webOrgId")?.val; //登录后有存储登录信息 @@ -251,12 +255,14 @@ class Home extends React.Component { payload: json, url: "FM/User/Get", onComplete: (ret) => { - if (ret && ret.Nav_Department) { - console.log(ret,'08080897878') + if (ret) { + this.setState({ + userInfo: ret, + }); } }, }); - } + }; safeCheck = () => { let series = []; let seriesName = ["巡回检查", "例行检查", "专业检查", "综合检查"]; @@ -558,109 +564,73 @@ class Home extends React.Component { let myChart = echarts.init(timelyRates); myChart.setOption( { - backgroundColor: "#fff", title: { - text: [83] + "%", + text: "83%", + x: "center", + y: "center", textStyle: { + fontWeight: "normal", color: "#ffa94d", - fontSize: 20, - }, - left: "center", - top: "43%", - }, - tooltip: { - formatter: function (params) { - return ( - '及时完成任务数：' + - [1265] + - "" - ); + fontSize: "20", }, }, - angleAxis: { - max: 100, - clockwise: true, // 逆时针 - // 隐藏刻度线 + color: '#ffd6b5', + legend: { show: false, + itemGap: 12, + data: ["01", "02"], }, - radiusAxis: { - type: "category", - show: true, - axisLabel: { - show: false, - }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - }, - polar: { - center: ["50%", "50%"], - radius: "130%", //图形大小 - }, + series: [ { - stack: "测试", - type: "bar", - data: [83], - showBackground: true, - backgroundStyle: { - color: "#EFF2F5", - borderColor: "#EFF2F5", - borderWidth: 3, - }, - coordinateSystem: "polar", - roundCap: true, - barWidth: 10, - silent: true, + name: "Line 1", + type: "pie", + clockWise: true, + radius: ["60%", "76%"], itemStyle: { normal: { - opacity: 1, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "#ffa94d", - }, - { - offset: 1, - color: "#f76707", - }, - ]), - borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "#ffa94d", - }, - { - offset: 1, - color: "#f76707", - }, - ]), - borderWidth: 1, + label: { + show: false, + }, + labelLine: { + show: false, + }, }, }, - }, - { - stack: "测试", - type: "bar", - data: [0.01], - showBackground: true, - backgroundStyle: { - color: "#fff9f4", - shadowColor: "rgba(0, 0, 0, 0.2)", - shadowBlur: 10, - shadowOffsetY: 2, - }, - coordinateSystem: "polar", - roundCap: true, - barWidth: 10, - itemStyle: { - color: "#ffd5b7", - borderColor: "rgba(255,132,44, 1)", - borderWidth: 3, - }, + hoverAnimation: false, + data: [ + { + value: 83, + name: "01", + itemStyle: { + normal: { + color: { + // 完成的圆环的颜色 + colorStops: [ + { + offset: 0, + color: "#ffa94d", // 0% 处的颜色 + }, + { + offset: 1, + color: "#f76707", // 100% 处的颜色 + }, + ], + }, + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + }, + { + name: "02", + value: 17, + }, + ], }, ], }, @@ -845,6 +815,41 @@ class Home extends React.Component { }); } }; + navToMenu = (ID) => { + this.props.history.push({ pathname: `/main/${ID}` }); + }; + /** + * 注销登录 + */ + handleLogout = () => { + const { OrgId, userId } = this.props.login; + const logJson = initFilter(OrgId, userId, "", 0, 1, 0); + this.props.dispatch({ + type: "app/addLoginOut", + payload: logJson, + }); + localStorage.removeItem("accessToken"); + this.props.history.push({ pathname: "/login" }); + }; + + handleUserMenuClick = (evt) => { + switch (evt.key) { + case "user-menu-logout": + handleLogout(); + break; + case "user-menu-cacheclean": + window.localStorage.clear(); + message.success("清除成功，即将重新加载页面", 2, () => { + setTimeout(() => window.location.reload(true), 500); + }); + break; + default: + break; + } + this.setState({ + visible: false, + }); + }; render() { return ( @@ -868,6 +873,7 @@ class Home extends React.Component { padding: "0px 20px", margin: "0px", minHeight: "242px", + minWidth: "1904px", // justifyContent: "space-between", // backgroundColor: "#fff", }} @@ -907,13 +913,13 @@ class Home extends React.Component { marginRight: "10px", }} > - {this.state.roleType == 0 ? ( + {this.state.userInfo.SEX == 1 ? ( homeuser
- 李阳，下午好 +
+ {this.state.userInfo.NAME}，{this.state.timeNow} +
+
+ { + this.setState({ visible: !this.state.visible }); + }} + overlay={ + + + + 我的资料 + + + + 修改密码 + + + + 清除缓存 + + {/* 版本号:{config.version} */} + + + 退出登录 + + + } + placement="topLeft" + trigger={["click"]} + > + + +
+
- 工号：xlk001004 + 工号：{this.state.userInfo.CODE}
- 手机号：15398220010 + 手机号：{this.state.userInfo.PHONE}
-
岗位：运输二班
+ {this.state.userInfo.Nav_Department ? ( +
+ 部门：{this.state.userInfo.Nav_Department.NAME} +
+ ) : ( + "" + )}
-
-
- -
待办事项
-
-
- 300 -
-
-
-
- -
待办超时
-
-
- 951 -
-
-
-
- -
已办事项
-
-
- 1328 -
-
-
-
- -
今日提醒
-
-
- 49 -
-
+ + + +
@@ -1048,7 +1071,6 @@ class Home extends React.Component { display: "flex", flexDirection: "row", flex: 1, - minWidth: "320px", }} >
@@ -1074,6 +1096,7 @@ class Home extends React.Component { width: "20px", height: "100%", backgroundColor: "#f4f7ff", + minWidth: "20px", }} >
@@ -1095,7 +1118,7 @@ class Home extends React.Component {
-
+
我的常用功能 - + {/* */}
- + { + this.navToMenu("dd1e5b37-f8b2-45fe-8904-08c587b5cc79"); + }} + >
用户列表 - + { + this.navToMenu("a8236679-bb7d-4432-b539-28c270338db1"); + }} + >
菜单配置 - + { + this.navToMenu("12388502-4ee9-02c2-8c80-68e07ba3d087"); + }} + >
排班日历 - + { + this.navToMenu("a81dfac3-af1e-4a5a-aadc-eb8e525ddd16"); + }} + >
- + { + this.navToMenu("b0972124-6aa1-479b-9725-5f726754ce58"); + }} + >
模版表单 - + { + this.navToMenu("6dc35aee-dd5e-4b31-b7ca-5f62d337d0c1"); + }} + >
排班明细 - + { + this.navToMenu("269f79ae-5f41-40f1-8d77-f532750208d1"); + }} + >
- 会议记录 + 班前会议 - + { + this.navToMenu("ea164ba5-b78a-4545-96fa-46e6ab635fb7"); + }} + >
- 工作记录 + 岗位当班
@@ -1207,6 +1278,7 @@ class Home extends React.Component { justifyContent: "space-between", alignItems: "center", minHeight: "388px", + minWidth: "1904px", // backgroundColor: "#fff", }} > @@ -1220,6 +1292,7 @@ class Home extends React.Component { padding: "0px", borderRadius: "5px", flex: 1, + minWidth: "1368px", }} >
@@ -1231,7 +1304,7 @@ class Home extends React.Component { {/* */}
- + @@ -1240,57 +1313,23 @@ class Home extends React.Component { className="home-userInfo-Icon" style={{ color: "#2177d5" }} > - 待处理工单 + 待办事项{" "} } key="1" > -
- {this.state.prepareJob.map((item, index) => { - return ( -
-
- -
-
-
-
- {item.type} -
-
- 发起人：{item.person} -
-
-
- {item.content} -
-
{item.data}
-
查看详情
-
-
- ); - })} -
-
- 查看更多 - -
- -
+
+ {this.state.workData.length > 0 ? ( + + ) : ( + + )}
- 超时工单 + 待办超时 } key="2" > -
- {this.state.overtimeJob.map((item, index) => { - return ( -
-
- -
-
-
-
- {item.type} -
-
- 发起人：{item.person} -
-
-
- {item.content} -
-
{item.data}
-
查看详情
-
-
- ); - })} -
-
- 查看更多 - -
- -
+
+ {this.state.workData.length > 0 ? ( + + ) : ( + + )}
- 已办工单 + 已办事项 } key="3" > -
- {this.state.overJob.map((item, index) => { - return ( -
-
- -
-
-
-
- {item.type} -
-
- 发起人：{item.person} -
-
-
- {item.content} -
-
{item.data}
-
查看详情
-
-
- ); - })} -
-
- 查看更多 - -
- -
+
+ {this.state.workData.length > 0 ? ( + + ) : ( + + )}
-
- {this.state.noticeJob.map((item, index) => { - return ( -
-
- -
-
-
-
- {item.type} -
-
- 发起人：{item.person} -
-
-
- {item.content} -
-
{item.data}
-
查看详情
-
-
- ); - })} -
-
- 查看更多 - -
- -
+
+ {this.state.workData.length > 0 ? ( + + ) : ( + + )}
- ,
-
+
@@ -1552,6 +1488,7 @@ class Home extends React.Component { style={{ margin: "0px 0px 10px 0px", minHeight: "275px", + minWidth: "1904px", }} >
-
+
@@ -1603,7 +1540,7 @@ class Home extends React.Component {
-
+
diff --git a/src/routes/dashboard.css b/src/routes/dashboard.css index 2395c2a..92af254 100644 --- a/src/routes/dashboard.css +++ b/src/routes/dashboard.css @@ -4,6 +4,7 @@ height: 100%; display: flex; flex-direction: column; + min-Width: "320px", } :global(.home-userInfo-tabs) { background-color: #eefff8; @@ -99,6 +100,7 @@ background-color: #fafafa; padding: 8px; border-radius: 10px; + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12) ; } :global(.home-tech-icon) { font-size: 30px; @@ -267,6 +269,13 @@ font-size: 13px; } :global(.home-work-type-black) { + background-color: #eef5ff; + color: #55a0f7; + padding: 3px 8px; + margin-right: 10px; + font-size: 13px; +} +:global(.home-work-type-green) { background-color: #eef6eb; color: #6dd230; padding: 3px 8px; @@ -303,4 +312,21 @@ flex-direction: column; background-color: #fff; border-radius: 5px; + min-width: 674px; } +:global(.home-setting) { + display: flex; + flex-direction: row; + align-items: center; +} +:global(.home-setting-icon) { + color: #909399; + padding: 4px; +} +:global(.home-setting-icon):hover { + color: #909399; + background-color: #f3f4f6; + padding: 4px; + border-radius: 5px; + box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1); +} \ No newline at end of file