基于Bootstrap的web移动端商户管理APP界面

最新推荐文章于 2024-08-19 15:26:51 发布

菜得很ovo

最新推荐文章于 2024-08-19 15:26:51 发布

阅读量311

点赞数

文章标签：前端 bootstrap javascript

本文链接：https://blog.csdn.net/weixin_61291587/article/details/131967000

版权

🧑‍💻开发语言

📣项目介绍

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中有和设计稿一模一样的卡片，但是发现了一个十分相似的卡片

<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

营销管理卡片

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

可视化信息

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

<!-- 可视化信息 -->
<div class="row justify-content-around middle-card-cycle">
    <a href="marketing_mana_gpc.html">
        <div class="col-xs4">
            <div class="number" style="background-color: #e89e7b;">
                97
            </div>
            <div class="number-text">团购券</div>
        </div>
    </a>
    <a href="marketing_mana_coupon.html">
        <div class="col-xs4">
            <div class="number" style="background-color: #9bcdc8;">
                2655
            </div>
            <div class="number-text">代金券</div>
        </div>
    </a>
    <a href="marketing_mana_voucher.html">
        <div class="col-xs4">
            <div class="number" style="background-color: #d88b8a;">
                54
            </div>
            <div class="number-text">优惠券</div>
        </div>
    </a>
</div>

首先，先创建一个父容器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超出父盒子的部分就会被隐藏掉，从而使标签看起来像是被切掉了一部分的不规整形状。

门店管理卡片

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

<div class="store-info-block">
    <div class="store-img"><img src="./img/hg.jpg" alt="">
        <div class="dot" style="display: block;"></div>
    </div>
    <div class="store-info">
        <div>时珍本草(武夷路)2</div>
        <div>门店地址,城市 区 详细地址</div>
        <div>已发布</div>
    </div>
    <a href="store_info.html"><div class="store-svg">&gt;</div></a>
</div>

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

/* 商店信息 */
.store-info-block {
    display: grid;
    grid-template-columns: 2fr 10fr 1fr;
    border-top: 1px solid #e5e5e5;
}

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

地图

使用的为高德地图js api

<!-- 地图 -->
<div class="map" id="map">
</div>
<!-- 高德api -->
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'用户的securityJsCode',
    }
</script>

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

// 选择的是 id="map" 的div
var map = new AMap.Map('map');
var map = new AMap.Map('map', {
    zoom:16,//地图缩放级别，数字越大地图放大倍数越高
    center: [121.479503,31.235986],//中心点坐标
    viewMode:'3D'//使用3D视图
});
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
    position: new AMap.LngLat(121.479503, 31.235986),   
  // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '商店'
});

// 将创建的点标记添加到已有的地图实例：
map.add(marker);
AMap.plugin([
    'AMap.ToolBar',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.MapType',
    'AMap.Geolocation',
], function(){
    // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
    map.addControl(new AMap.ToolBar());
});