静态页面

project.config.json

@@ -2,7 +2,7 @@
 	"miniprogramRoot": "dist/",
 	"projectname": "miniapp",
 	"description": "",
-	"appid": "wxc96058d57e77f373",
+	"appid": "wxe44244d1a5ea3364",
 	"setting": {
 		"urlCheck": false,
 		"es6": false,

src/assets/css/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "9063194",
+      "name": "消 息",
+      "font_class": "xiaoxi",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
     {
       "icon_id": "6985348",
       "name": "简介",

src/assets/css/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="xiaoxi" unicode="&#58935;" d="M882.176 67.584l6.656-6.656 134.656-134.656H512c-282.624-0.512-512 204.8-512 457.728s229.376 458.24 512 458.24S1024 636.928 1024 384c0-122.88-53.76-233.984-141.824-316.416z m-208.384 235.52c44.544 0 80.896 36.352 80.896 80.896s-36.352 80.896-80.896 80.896c-44.544 0-80.896-36.352-80.896-80.896s36.352-80.896 80.896-80.896z m-323.584 0c44.544 0 80.896 36.352 80.896 80.896s-36.352 80.896-80.896 80.896-80.384-36.352-80.384-80.896 35.84-80.896 80.384-80.896z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="jianjie" unicode="&#58927;" d="M767.723243 457.063784h-512a34.594595 34.594595 0 0 0-36.531892 36.531892 34.594595 34.594595 0 0 0 36.531892 36.531892h512a34.594595 34.594595 0 0 0 36.531892-36.531892 34.594595 34.594595 0 0 0-36.531892-36.531892z m0-219.32973h-512a36.531892 36.531892 0 1 0 0 73.063784h512a36.531892 36.531892 0 1 0 0-73.063784z m0-219.191351h-512a36.531892 36.531892 0 1 0 0 73.063783h512a36.531892 36.531892 0 1 0 0-73.063783z m-512 730.776216h219.744865A34.594595 34.594595 0 0 0 512 712.925405a34.594595 34.594595 0 0 0-36.531892-36.531891H256.276757a34.594595 34.594595 0 0 0-36.531892 36.531891 34.456216 34.456216 0 0 0 36.531892 36.531892zM804.393514 896H219.606486A146.542703 146.542703 0 0 1 73.478919 749.457297v-730.914594A146.542703 146.542703 0 0 1 219.606486-128h584.787028a146.542703 146.542703 0 0 1 146.127567 146.542703V749.457297A146.542703 146.542703 0 0 1 804.393514 896z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="guanbi1" unicode="&#58891;" d="M824.50390625 63.27035522999995a25.36523438 25.36523438 0 0 0-17.9296875 7.43472289L195.80386352 681.47460938a25.3125 25.3125 0 1 0 35.859375 35.85937499l610.8230896-610.82226562a25.41796875 25.41796875 0 0 0-17.98242187-43.2421875M213.734375 63.27035522999995a25.3125 25.3125 0 0 0-17.9296875 43.29327392l610.82226563 610.77035523a25.36523438 25.36523438 0 0 0 35.80664062-35.859375L231.6640625 70.70425415a25.3125 25.3125 0 0 0-17.9296875-7.4347229"  horiz-adv-x="1024" />

src/components/ChatIcon/index.jsx

@@ -5,12 +5,14 @@ import './style.scss'
 
 export default function ChatIcon(props) {
 
-  const [PageX] = useState(Taro.getSystemInfoSync().windowWidth - 20)
-  const [PageY] = useState(Taro.getSystemInfoSync().windowHeight - 20)
+  const [PageX] = useState(Taro.getSystemInfoSync().windowWidth - 60)
+  const [PageY] = useState(Taro.getSystemInfoSync().windowHeight - 60)
 
   return (
     <MovableArea className='components ChatIcon'>
-      <MovableView className='MoveItem' x={PageX} y={PageY} direction='all'>text</MovableView>
+      <MovableView className='MoveItem' x={PageX} y={PageY} direction='all'>
+        <text className='iconfont icon-xiaoxi centerLabel active'></text>
+      </MovableView>
     </MovableArea>
   )
 }

src/components/ChatIcon/style.scss

@@ -7,11 +7,29 @@
   z-index: 1000;
   height: 100vh;
   pointer-events: none;
-  >.MoveItem {
-    width: 100px;
-    height: 100px;
+  > .MoveItem {
+    width: 88px;
+    height: 88px;
     border-radius: 100%;
-    background: red;
+    background: rgba(251, 171, 87, 0.5);
     pointer-events: auto;
+    > text {
+      font-size: 50px;
+      color: #fa9730;
+      overflow: visible;
+      &.active {
+        &::after {
+          content: "";
+          width: 12px;
+          height: 12px;
+          border-radius: 100%;
+          background: #ff0000;
+          display: block;
+          position: absolute;
+          top: -4px;
+          right: -4px;
+        }
+      }
+    }
   }
 }