?????開發(fā)語言

HTML/CSS/JS

??項目介紹

Web商戶管理后臺是一個使用bootstrap框架構(gòu)建的一個移動端響應(yīng)式頁面。

??效果預(yù)覽

在線預(yù)覽
https://1024code.com/ide/IFBhe0Z

圖片預(yù)覽

??項目依賴

• jQuery v3.2.1

• Bootstrap v4.3.1

• Bootstrap-icons-1.10.3

??項目要點

bootstrap-icons 加載緩慢問題

下載了zip壓縮包文件后，打開發(fā)現(xiàn)里面只有圖標(biāo)(svg)和王爺開放字體格式(woff),缺少了css文件。
然后就去引用了官方的CDN CSS，在使用CDN的過程中發(fā)現(xiàn)圖標(biāo)顯示的很慢，看了一下CDN的CSS文件內(nèi)容

才發(fā)現(xiàn)CDN的 CSS中引用的woff文件也是CDN里的，造成加載速度緩慢。于是就將CDN中的CSS保存到本地，再將SRC地址全部替換成本地資源（在官方下載的zip包），這才解決了圖標(biāo)加載緩慢的問題

交易信息卡片

在制作交易信息卡片的時候，并沒有發(fā)現(xiàn)bootstrap中有和設(shè)計稿一模一樣的卡片，但是發(fā)現(xiàn)了一個十分相似的卡片

只需要將組件中的h5標(biāo)簽和p標(biāo)簽的順序調(diào)換一下，然后再調(diào)整一下css樣式，就能得到和設(shè)計稿中一模一樣的效果的卡片

營銷管理卡片

營銷管理卡片分為 可視化信息 和 標(biāo)簽 兩個部分

可視化信息

中間的可視化信息由一個有色圓形的數(shù)字和標(biāo)題組成，這一部分主要使用的是使用Bootstrap的柵格系統(tǒng)實現(xiàn)布局

首先，先創(chuàng)建一個父容器div，然后再把父容器平均分成三個div來放可視化信息。
Bootstrap柵格系統(tǒng)柵格系統(tǒng)把屏幕平均分成12分，三個div來平分的話，每一個div就是占4份所以最終給到div的class為col-xs4。
這三個div要在父容器中以橫向和sapce-around的方式進(jìn)行排列，所以就給父容器div添加屬性row和justify-content-around

標(biāo)簽

實現(xiàn)斜角標(biāo)簽一共分為三個部分 ：創(chuàng)建、定位 、旋轉(zhuǎn)隱藏
創(chuàng)建：在父元素div中增加一個div并填寫需要的文字
定位：給父元素div設(shè)置相對定位，然后斜角標(biāo)簽middle-target設(shè)置絕對定位，這樣斜角標(biāo)簽就能在父元素中移動，再通過設(shè)置top和right將標(biāo)簽移動到何時的位置（這個位置要超出父盒子一點）
旋轉(zhuǎn)隱藏：在移動完標(biāo)簽后，它還是一個長方形div，此時我們只需要給它設(shè)置transform: rotate(45deg);它就會順時針旋轉(zhuǎn)45度，然后給父盒子設(shè)置 overflow: hidden; 這時候 標(biāo)簽div超出父盒子的部分就會被隱藏掉，從而使標(biāo)簽看起來像是被切掉了一部分的不規(guī)整形狀。

門店管理卡片

這一頁主要是由每一個門店卡片構(gòu)成的列表
門店卡片主要由三個部分組成：圖片、描述文字、箭頭圖標(biāo)

這里的使用的是grid布局方式

通過grid布局將這個卡片分為三列，然后每一列再通過設(shè)置fr去調(diào)節(jié)列寬，最終劃分出每一列的位置

地圖

使用的為高德地圖js api

HTML中需要創(chuàng)建一個id=“map” 的div來放置地圖，并且添加上高德api的script標(biāo)簽

然后再另外一個js文件當(dāng)中填寫地圖的配置信息

• 中心點可以通過坐標(biāo)拾取器獲得?https://lbs.amap.com/tools/picker

• securityJsCode 通過高德開放平臺獲得?https://console.amap.com/dev/key/app

• 其他設(shè)置請看高德地圖api文檔?https://lbs.amap.com/api/jsapi-v2/guide/abc/quickstart