docs: popover demo 增加白色底

src/packages/popover/demo.scss

@@ -24,3 +24,11 @@
 .customContent .popover-content {
   width: 200px;
 }
+
+.demo-cell-popove {
+  flex-wrap: wrap;
+}
+
+.nut-popover {
+  height: 38px;
+}

src/packages/popover/demo.taro.tsx

 import React, { useRef, useState } from 'react'
-import { Button, Icon, Popover } from '@/packages/nutui.react.taro'
+import { Button, Icon, Popover, Cell } from '@/packages/nutui.react.taro'
 import '@/packages/popover/demo.scss'
 
 interface List {
@@ -130,6 +130,7 @@ const BadgeDemo = () => {
     <>
       <div className="demo">
         <h2>基础用法</h2>
+        <Cell>
           <Popover
             visible={lightTheme}
             onClick={() => {
@@ -154,8 +155,9 @@ const BadgeDemo = () => {
               暗黑风格
             </Button>
           </Popover>
-
+        </Cell>
         <h2>选项配置</h2>
+        <Cell>
           <Popover
             visible={showIcon}
             theme="dark"
@@ -181,8 +183,9 @@ const BadgeDemo = () => {
               禁用选项
             </Button>
           </Popover>
-
+        </Cell>
         <h2>自定义内容</h2>
+        <Cell>
           <Popover
             visible={customized}
             onClick={() => {
@@ -204,7 +207,10 @@ const BadgeDemo = () => {
                       key={item.name}
                     >
                       <Icon name={item.name} size="15" />
-                    <div className="self-content-desc" style={selfContentDesc}>
+                      <div
+                        className="self-content-desc"
+                        style={selfContentDesc}
+                      >
                         {item.desc}
                       </div>
                     </div>
@@ -215,7 +221,7 @@ const BadgeDemo = () => {
               ''
             )}
           </Popover>
-
+        </Cell>
         <h2 className="demoClass">位置自定义</h2>
 
         <Popover
@@ -231,6 +237,7 @@ const BadgeDemo = () => {
           <div className="brick" />
         </Popover>
 
+        <Cell className="demo-cell-popover">
           <div className="customButtonBox">
             {customLocation.current.map((location, i) => {
               const k = Object.keys(location)[0] as any
@@ -240,17 +247,18 @@ const BadgeDemo = () => {
                   key={i}
                   type="primary"
                   shape="square"
-                style={{ width: '160px', marginBottom: '8px' }}
+                  style={{ width: '140px', marginBottom: '8px' }}
                   onClick={() => {
                     setCustomLocationName(k)
                     setCustomLocationShow(!customLocationShow)
                   }}
                 >
-                {k} 弹出
+                  {k}
                 </Button>
               )
             })}
           </div>
+        </Cell>
       </div>
     </>
   )

src/packages/popover/demo.tsx

@@ -3,6 +3,7 @@ import { useTranslate } from '../../sites/assets/locale'
 import { Popover } from './popover'
 import Button from '@/packages/button'
 import Icon from '@/packages/icon'
+import Cell from '@/packages/cell'
 
 interface T {
   [props: string]: string
@@ -197,6 +198,7 @@ const BadgeDemo = () => {
       <style>{styles}</style>
       <div className="demo">
         <h2>{translated.title}</h2>
+        <Cell>
           <Popover
             visible={lightTheme}
             onClick={() => {
@@ -221,8 +223,10 @@ const BadgeDemo = () => {
               {translated.dark}
             </Button>
           </Popover>
+        </Cell>
 
         <h2>{translated.title1}</h2>
+        <Cell>
           <Popover
             visible={showIcon}
             theme="dark"
@@ -248,8 +252,9 @@ const BadgeDemo = () => {
               {translated.disableAction}
             </Button>
           </Popover>
-
+        </Cell>
         <h2>{translated.content}</h2>
+        <Cell>
           <Popover
             visible={customized}
             onClick={() => {
@@ -271,7 +276,10 @@ const BadgeDemo = () => {
                       key={item.name}
                     >
                       <Icon name={item.name} size="15" />
-                    <div className="self-content-desc" style={selfContentDesc}>
+                      <div
+                        className="self-content-desc"
+                        style={selfContentDesc}
+                      >
                         {item.desc}
                       </div>
                     </div>
@@ -282,7 +290,7 @@ const BadgeDemo = () => {
               ''
             )}
           </Popover>
-
+        </Cell>
         <h2 className="demoClass">{translated.title3}</h2>
 
         <Popover
@@ -297,7 +305,7 @@ const BadgeDemo = () => {
         >
           <div className="brick" />
         </Popover>
-
+        <Cell className="demo-cell-popover">
           <div className="customButtonBox">
             {customLocation.current.map((location, i) => {
               const k = Object.keys(location)[0] as any
@@ -307,17 +315,18 @@ const BadgeDemo = () => {
                   key={i}
                   type="primary"
                   shape="square"
-                style={{ width: '160px', marginBottom: '8px' }}
+                  style={{ width: '140px', marginBottom: '8px' }}
                   onClick={() => {
                     setCustomLocationName(k)
                     setCustomLocationShow(!customLocationShow)
                   }}
                 >
-                {k} {translated.popup}
+                  {k}
                 </Button>
               )
             })}
           </div>
+        </Cell>
       </div>
     </>
   )