feat: 添加外卖banner

.dumi/theme/layout.tsx

@@ -5,6 +5,7 @@ import Navbar from 'dumi-theme-default/src/components/Navbar';
 import SideMenu from 'dumi-theme-default/src/components/SideMenu';
 import SlugList from 'dumi-theme-default/src/components/SlugList';
 import SearchBar from 'dumi-theme-default/src/components/SearchBar';
+import { Popover } from 'antd';
 import Notice from './Notice';
 import './style/layout.less';
 
@@ -24,6 +25,30 @@ const Hero = hero => (
   </>
 );
 
+const WaimaiBanner = () => (
+  <div className="waimai-banner">
+    <Popover
+      placement="bottom"
+      content={
+        <>
+          <p style={{ textAlign: 'center' }}>天天有点券</p>
+          <img
+            src="/images/mini-waimai.jpg"
+            style={{ height: '129px', width: '129px' }}
+          />
+        </>
+      }
+      trigger="hover"
+    >
+      <img className="waimai-banner-img" src="/images/waimai-banner.png" />
+      <img
+        className="waimai-banner-tiny-img"
+        src="/images/waimai-banner-sm.png"
+      />
+    </Popover>
+  </div>
+);
+
 const Features = features => (
   <div className="__dumi-default-layout-features">
     {features.map(feat => (
@@ -87,7 +112,12 @@ const Layout: React.FC<IRouteComponentProps> = ({ children, location }) => {
     >
       <Navbar
         location={location}
-        navPrefix={<SearchBar />}
+        navPrefix={
+          <div style={{ display: 'inline-block' }}>
+            <WaimaiBanner />
+            <SearchBar />
+          </div>
+        }
         onMobileMenuClick={ev => {
           setMenuCollapsed(val => !val);
           ev.stopPropagation();

.dumi/theme/style/layout.less

@@ -157,6 +157,7 @@ body {
       a dt {
         color: @c-link;
         transition: opacity 0.2s;
+
         &:hover {
           opacity: 0.7;
           text-decoration: underline;
@@ -320,3 +321,30 @@ body {
 #vcomments {
   margin-top: 20px;
 }
+
+.waimai-banner {
+  display: inline-block;
+  vertical-align: middle;
+
+  .waimai-banner-img {
+    height: 64px;
+    cursor: pointer;
+  }
+
+  .waimai-banner-tiny-img {
+    cursor: pointer;
+    height: 50px;
+    display: none;
+    margin-left: 20px;
+  }
+
+  @media @mobile {
+    .waimai-banner-img {
+      display: none;
+    }
+
+    .waimai-banner-tiny-img {
+      display: block;
+    }
+  }
+}