🧑‍💻开发语言

HTML/CSS/JS

📣项目介绍

Web商户管理后台是一个使用bootstrap框架构建的一个移动端响应式页面。

📷效果预览

在线预览
https://1024code.com/ide/IFBhe0Z

图片预览

⚙️项目依赖

• jQuery v3.2.1

• Bootstrap v4.3.1

• Bootstrap-icons-1.10.3

🛠项目要点

bootstrap-icons 加载缓慢问题

下载了zip压缩包文件后，打开发现里面只有图标(svg)和王爷开放字体格式(woff),缺少了css文件。
然后就去引用了官方的CDN CSS，在使用CDN的过程中发现图标显示的很慢，看了一下CDN的CSS文件内容

才发现CDN的 CSS中引用的woff文件也是CDN里的，造成加载速度缓慢。于是就将CDN中的CSS保存到本地，再将SRC地址全部替换成本地资源（在官方下载的zip包），这才解决了图标加载缓慢的问题

交易信息卡片

在制作交易信息卡片的时候，并没有发现bootstrap中有和设计稿一模一样的卡片，但是发现了一个十分相似的卡片

只需要将组件中的h5标签和p标签的顺序调换一下，然后再调整一下css样式，就能得到和设计稿中一模一样的效果的卡片

营销管理卡片

营销管理卡片分为 可视化信息 和 标签 两个部分

可视化信息

中间的可视化信息由一个有色圆形的数字和标题组成，这一部分主要使用的是使用Bootstrap的栅格系统实现布局

首先，先创建一个父容器div，然后再把父容器平均分成三个div来放可视化信息。
Bootstrap栅格系统栅格系统把屏幕平均分成12分，三个div来平分的话，每一个div就是占4份所以最终给到div的class为col-xs4。
这三个div要在父容器中以横向和sapce-around的方式进行排列，所以就给父容器div添加属性row和justify-content-around

标签

实现斜角标签一共分为三个部分 ：创建、定位 、旋转隐藏
创建：在父元素div中增加一个div并填写需要的文字
定位：给父元素div设置相对定位，然后斜角标签middle-target设置绝对定位，这样斜角标签就能在父元素中移动，再通过设置top和right将标签移动到何时的位置（这个位置要超出父盒子一点）
旋转隐藏：在移动完标签后，它还是一个长方形div，此时我们只需要给它设置transform: rotate(45deg);它就会顺时针旋转45度，然后给父盒子设置 overflow: hidden; 这时候 标签div超出父盒子的部分就会被隐藏掉，从而使标签看起来像是被切掉了一部分的不规整形状。

门店管理卡片

这一页主要是由每一个门店卡片构成的列表
门店卡片主要由三个部分组成：图片、描述文字、箭头图标

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

通过grid布局将这个卡片分为三列，然后每一列再通过设置fr去调节列宽，最终划分出每一列的位置

地图

使用的为高德地图js api

HTML中需要创建一个id=“map” 的div来放置地图，并且添加上高德api的script标签

然后再另外一个js文件当中填写地图的配置信息

• 中心点可以通过坐标拾取器获得 https://lbs.amap.com/tools/picker

• securityJsCode 通过高德开放平台获得 https://console.amap.com/dev/key/app

• 其他设置请看高德地图api文档 https://lbs.amap.com/api/jsapi-v2/guide/abc/quickstart