Vue2基础实例——实现移动端静态页面（CDN引入方式）
本篇文章仅用于参考、学习
说明：
本文是基础篇大佬可以不用看了。本次实例用到Vue2、Vant2、Highcharts图表甘特图等，CDN引入方式。此外也可以自行添加组件Echarts、ElementUI等等。为了能方便理解，有些地方的代码比较啰嗦多余。是最普通的JSP、Html页面，非uniapp开发环境。只是一个举例demo，样式设计等等可以自己调整。
一、
进入正题 可以先看一下效果图：
二、
JSP页面：
<html lang="en" >
<head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title>项目看板(移动端)</title><script src="../new/js/vue@2.7.16.js"></script><link rel="stylesheet" href="../new/js/element-ui@2.15.14/index.css"><script src="../new/js/element-ui@2.15.14/index.js"></script><link rel="stylesheet" href="../new/js/vant@2.13.2/index.min.css"><script src="../new/js/vant@2.13.2/vant.min.js"></script><script src="../new/js/echarts/echarts.js"></script><script src="../new/js/echarts/highcharts-gantt.js"></script><link rel="stylesheet" href="../new/css/spectaculars/spectacularsByMobile.css"><style>/* 引入OTF字体 */@font-face {font-family: 'ysbty'; /* 自定义的字体名称 */src: url('../../../new/js/font-style/ysbty.otf') format('opentype'); /* OTF字体文件路径 */font-weight: normal; /* 字体粗细 */font-style: normal; /* 字体风格 */}/* 引入TTF字体 */@font-face {font-family: 'pmzd'; /* 另一个自定义的字体名称 */src: url('../../../new/js/font-style/pmzd.ttf') format('truetype'); /* TTF字体文件路径 */font-weight: bold; /* 字体粗细 */font-style: italic; /* 字体风格 */}/*滚动条样式*/div::-webkit-scrollbar {width: 8px !important;height: 8px !important;background-color: transparent !important;}div::-webkit-scrollbar-track {border-radius: 5px;background-color: #00489b !important;background-color: transparent !important;}div::-webkit-scrollbar-thumb {background-color: #00489b !important;}/*tabs页样式*/.van-tabs__nav--line.van-tabs__nav--complete{background-color: #181818;}.van-tab--active{color: #00FFFF;}.van-tabs__line{background-color: #00FFFF;}</style>
</head>
<body>
<div id="app">
<template><div class="header"><div class="one"><div style="width: 25%;height: 40px;">LOGO</div><img src="../../new/image/spectaculars/app_menu_icon.svg" alt="" style="position: absolute;right: 30px;" @click="showPopup"><van-popup position="right" v-model="show" :style="{height: '100%',width:'50%'}">内容</van-popup></div><div class="two"><div class="title" style="margin-top: 20px;">某某某某某某某某某项目</div><div class="con"><div style="font-size: 28px;color: #00FFFF;font-family: 'pmzd';margin-top: 10px;">项目综合看板</div><img src="../../new/image/spectaculars/app_guang.png" alt="" style="width: 100%;height: 150px; position: absolute;"><div class="group" style="margin-top: 25px;"><div class="item active">项目概况</div><div class="item" style="margin-left: -5%;">项目进度</div></div><div class="group"><div class="item">施工过程</div><div class="item" style="margin-left: -5%;">项目现场</div></div></div></div></div><div class="content"><van-tabs v-model="active" scrollspy sticky><van-tab title="经营专项"><div class="jyzx"><img src="../../new/image/spectaculars/app_con_background.svg" alt="" width="100%" style="position: absolute;top: 0px;"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">经营专项一览</div><div style="font-size: 12px; color: #878787;">（单位：万元）</div></div><div class="con"><div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;justify-content: center;align-items: center;"><div><div style="font-size: 16px;">项目预算/资金计划</div><div style="font-size: 26px;font-family: 'pmzd';font-weight: bold;">59,381.04/29,381.04</div></div></div><div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;"><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">项目收支</div><div style="font-size: 18px;color: #00FFFF">23,456.78</div><img src="../../new/image/spectaculars/app_jyzx_xmszIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">当前成本</div><div style="font-size: 18px;color: #00FFFF">23,456.78</div><img src="../../new/image/spectaculars/app_jyzx_dqcbIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">当前利润</div><div style="font-size: 18px;color: #00FFFF">23,456.78</div><img src="../../new/image/spectaculars/app_jyzx_dqlrIcon.png" alt="" width="45px"></div></div></div></div><div style="width: 208px;height: 42px;margin-top: 20px;" @click="onJyzxyl()"><img src="../../new/image/spectaculars/app_ckxq.png" alt="" width="100%" height="100%"></div></div></van-tab><van-tab title="材料专项"><div class="clzx"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">材料专项一览</div><div style="font-size: 12px; color: #878787;">（单位：万元）</div></div><div class="con" ><div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;justify-content: center;align-items: center;"><div><div style="font-size: 16px;">项目预算/资金计划</div><div style="font-size: 26px;font-family: 'pmzd';font-weight: bold;">59,381.04/29,381.04</div></div></div><div id="review_box" style="width: 100%;height: 140px;list-style: none;background: #2b3038; display: flex;flex-direction: column; margin-top: 15px;overflow: hidden;"><ul id="roll1" ref="roll1" style="width: 90%;margin-left: 5%;list-style: none;"><li style="width: 90%;margin-top: 10px; display: flex;flex-direction: row;align-items: center;" v-for="item in 8"><img src="../../new/image/spectaculars/app_clzx_tzIcon.svg" alt="" width="12px"height="12px"><div style="font-size: 14px;color: #FFF;margin-left: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">某某某某某某材料验收消息通知！</div></li></ul><ul id="roll2" ref="roll2" style="width: 90%;margin-left: 5%;list-style: none;"></ul></div></div></div><div style="width: 208px;height: 42px;margin-top: 20px;"><img src="../../new/image/spectaculars/app_ckgd.png" alt="" width="100%" height="100%"></div></div></van-tab><van-tab title="合同信息"><div class="htxx"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">合同信息一览</div><div style="font-size: 12px; color: #878787;">（单位：份）</div></div><div class="con"><div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;"><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">项目合同信息</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">1,225</div></div><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">同比增减</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">+50%</div></div></div><div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;"><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">分包合同数</div><div style="font-size: 18px;color: #00FFFF">123</div><img src="../../new/image/spectaculars/app_htxx_fbhtIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">劳务合同数</div><div style="font-size: 18px;color: #00FFFF">865</div><img src="../../new/image/spectaculars/app_htxx_lwhtIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">材料合同数</div><div style="font-size: 18px;color: #00FFFF">85</div><img src="../../new/image/spectaculars/app_htxx_clhtIcon.png" alt="" width="45px"></div></div></div></div><div style="width: 208px;height: 42px;margin-top: 20px;"><img src="../../new/image/spectaculars/app_ckxq.png" alt="" width="100%" height="100%"></div></div></van-tab><van-tab title="项目进度甘特图"><div class="xmjdgtt"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">项目进度</div><div style="font-size: 12px; color: #878787;"></div></div><div class="con"><div id="xmjdgttChart" style="width: 900px;"></div></div></div><div style="width: 208px;height: 42px;margin-top: 20px;"><img src="../../new/image/spectaculars/app_ckgd.png" alt="" width="100%" height="100%"></div></div></van-tab><van-tab title="项目现场信息"><div class="xmxcxx"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">项目进度</div><div style="font-size: 12px; color: #878787;"></div></div><div class="con"><div class="group" style="width: 142px;margin-bottom: 20px;" v-for="item in 6"><div style="position: relative;"><img src="../../new/image/spectaculars/picture1.jpg" alt="" width="100%" height="93px" style="border: 2px solid rgba(0, 255, 255, 0.6);"><img src="../../new/image/spectaculars/app_xmxcxx_border.svg" alt="" style="position: absolute;left: 3px;top: 3px;"></div><div style="width: 100%;height: 35px;margin-top: 10px; font-size: 12px;overflow: hidden;line-height: 18px; -webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;color: #FFFFFF;">某某某项目-第一现场-第15块地第6号摄像头</div></div></div></div><div style="width: 208px;height: 42px;margin-top: 20px;"><img src="../../new/image/spectaculars/app_ckgd.png" alt="" width="100%" height="100%"></div></div></van-tab><van-tab title="项目进度"><div class="xmjd"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">项目进度</div><div style="font-size: 12px; color: #878787;"></div></div><div class="con"><div class="group">招标信息</div><div class="group">投标信息</div><div class="group">立项信息</div><div class="group">设计信息</div><div class="group">施工过程信息</div><div class="group">竣工验收信息</div></div></div></div></van-tab><van-tab title="本月安全"><div class="byaqyl"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">本月安全一览</div><div style="font-size: 12px; color: #878787;">（单位：个）</div></div><div class="con"><div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;"><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">隐患数</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">15</div></div><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">同比增减</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">-25%</div></div></div><div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;"><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">安全培训次数</div><div style="font-size: 18px;color: #00FFFF">123</div><img src="../../new/image/spectaculars/app_aqyl_pxcsIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">安全简报数量</div><div style="font-size: 18px;color: #00FFFF">865</div><img src="../../new/image/spectaculars/app_htxx_lwhtIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">安全会议数量</div><div style="font-size: 18px;color: #00FFFF">85</div><img src="../../new/image/spectaculars/app_htxx_clhtIcon.png" alt="" width="45px"></div></div></div></div></div></van-tab><van-tab title="本月质量"><div class="byzlyl"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">本月质量一览</div><div style="font-size: 12px; color: #878787;">（单位：项）</div></div><div class="con"><div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;"><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">未整改项数</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">25</div></div><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">同比增减</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">-25%</div></div></div><div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;"><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">检查次数</div><div style="font-size: 18px;color: #00FFFF">123</div><img src="../../new/image/spectaculars/app_zlyl_jccsIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">自检次数</div><div style="font-size: 18px;color: #00FFFF">865</div><img src="../../new/image/spectaculars/app_zlyl_zjcsIcon.png" alt="" width="45px"></div><div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">整改项数</div><div style="font-size: 18px;color: #00FFFF">85</div><img src="../../new/image/spectaculars/app_zlyl_zgxsIcon.png" alt="" width="45px"></div></div></div></div></div></van-tab><van-tab title="证件资质"><div class="zjzzyl"><div class="box"><div class="title"><div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">证件资质一览</div><div style="font-size: 12px; color: #878787;">（单位：个）</div></div><div class="con"><div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;"><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">资质信息</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">85</div></div><div style="width: 50%"><div style="margin-left: 20px;font-size: 16px;">同比增减</div><div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">+25%</div></div></div><div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;"><div style="width: 46%;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">人员培训数量</div><div style="font-size: 18px;color: #00FFFF">23</div><img src="../../new/image/spectaculars/app_zzyl_pxcsIcon.png" alt="" width="45px"></div><div style="width: 46%;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;"><div style="font-size: 12px;color: #FFFFFF;">人员证件数量</div><div style="font-size: 18px;color: #00FFFF">865</div><img src="../../new/image/spectaculars/app_zzyl_zjslIcon.png" alt="" width="45px"></div></div></div></div></div></van-tab></van-tabs></div></template>
</div>
</body>
<script src="../new/js/app/spectaculars/spectacularsByMobile.js"></script>
</html>
移动端页面配置：
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,userscalable=no"/>
自定义字体引入：
一种是OTF格式一种是TTF格式类型不一样需要注意，样式自行修改
滚动条样式这里可以省略，我这里是因为样式被覆盖了所以多写一遍。
template标签实时渲染页面Vue2中需要用到，Vue3中可以省略，具体两者有什么区别去看官方文档吧因为我也不知道。哈哈哈
页面上主要是用到一个Vnat的tabs标签组件 吸顶定位样式。
<van-tabs v-model="active" scrollspy sticky><van-tab v-for="index in 8" :title="'选项 ' + index">内容 {{ index }}</van-tab>
</van-tabs>具体参数配置可以看官方文档有的时候网不太好可能进不去。注意版本区别与兼容性。
https://vant-ui.github.io/vant/v2/#/zh-CN/
https://vant-ui.github.io/vant/v2/#/zh-CN/https://vant-ui.github.io/vant/#/zh-CNhttps://vant-ui.github.io/vant/#/zh-CN其他地方就没什么好说的了。
三、
CSS:
样式这里随便看看就行了，有很多也可以省略实现，自己修改吧
html, body,#app {width: 100%;height: 100%;margin: 0px;padding: 0px;background-color: #181818;
}#app {width: 100%;height: 100%;margin: 0px;padding: 0px;display: flex;flex-direction: column;
}
.header{width: 100%;height: 35%;padding-top: 2%;display: flex;flex-direction: column;
}
.header .one{width: 100%;height: 10%;display: flex;flex-direction: row;justify-content: center;align-items: center;position: relative;
}.header .two{width: 100%;height: 90%;text-align: center;
}
.header .two .title{font-size: 28px;color: #ffffff;font-family: 'pmzd';
}
.header .two .con{width: 100%;display: flex;flex-direction: column;position: relative;
}
.header .two .con .group{width: 100%;display: flex;flex-direction: row;justify-content: center;color: #FFFFFF;font-family: 'ysbty';margin-top: 20px;
}
.header .two .con .group .item{width: 45%;height: 50px;font-size: 20px;background-image: url('../../../new/image/spectaculars/app_btn_none.png');background-repeat: no-repeat;background-size: 100% 100%;display: flex;justify-content: center;align-items: center;
}
.header .two .con .group .active {background-image: url('../../../new/image/spectaculars/app_btn_action.png');background-repeat: no-repeat;background-size: 100% 100%;
}.header .three{width: 100%;overflow: auto;white-space: nowrap;
}.content{width: 100%;padding-bottom: 30px;
}
/*经营专项*/
.content .jyzx{width: 100%;display: flex;flex-direction: column;align-items: center;position: relative;
}
.content .jyzx .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .jyzx .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .jyzx .con{width: 100%;padding: 15px;
}/*材料专项*/
.content .clzx{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .clzx .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .clzx .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .clzx .con{width: 100%;padding: 15px;
}
/*合同信息*/
.content .htxx{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .htxx .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .htxx .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .htxx .con{width: 100%;padding: 15px;
}/*项目进度甘特图*/
.content .xmjdgtt{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .xmjdgtt .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .xmjdgtt .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .xmjdgtt .con{width: 100%;padding: 15px;background-color: #2b3038;overflow: auto;
}/*项目现场信息*/
.content .xmxcxx{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .xmxcxx .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .xmxcxx .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .xmxcxx .con{width: 100%;padding: 15px;display: flex;flex-direction: row;justify-content: space-around;align-items: center;flex-wrap: wrap;
}
/*项目进度*/
.content .xmjd{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .xmjd .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .xmjd .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .xmjd .con{width: 100%;padding: 15px;display: flex;flex-direction: row;justify-content: space-around;align-items: center;flex-wrap: wrap;
}
.content .xmjd .con .group{width: 140px;height: 60px;margin-bottom: 20px;color: #FFF;font-size: 20px;font-family: 'ysbty';background-image: url('../../../new/image/spectaculars/app_button_background.png');background-repeat: no-repeat;background-size: 100% 100%;display: flex;justify-content: center;align-items: center;
}/*本月安全一览*/
.content .byaqyl{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .byaqyl .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .byaqyl .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .byaqyl .con{width: 100%;padding: 15px;
}/*本月质量一览*/
.content .byzlyl{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .byzlyl .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .byzlyl .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .byzlyl .con{width: 100%;padding: 15px;
}/*证件资质一览*/
.content .zjzzyl{width: 100%;display: flex;flex-direction: column;align-items: center;
}
.content .zjzzyl .box{width: 90%;margin-top: 30px;border-left: 2px solid #142e3b;border-right: 2px solid #142e3b;border-bottom: 2px solid #142e3b;
}.content .zjzzyl .title{width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-image: url('../../../new/image/spectaculars/app_title_background.png');background-repeat: no-repeat;background-size: 100% 100%;
}
.content .zjzzyl .con{width: 100%;padding: 15px;
}四、
JS:
const vm = new Vue({el: '#app',data() {return {active: 0,show: false,rolltimer:null,}},created() {},mounted() {var $this=this;/*点击切换样式*/$(".header .two .con .group div").each(function () {//给当前项添加点击事件（点击后切换样式）$(this).bind('click', function () {// 移除其他所有项的active类$(".header .two .con .group div").each(function () {$(this).removeClass('active');})// 给当前项添加active类$(this).addClass('active');})});$this.roll(60);//材料专项一览滚动$this.xmjdGantChart();//项目进度甘特图},methods: {/*点击右侧弹出*/showPopup() {this.show = true;},/*材料专项一览滚动*/roll(t){var $this=this;var ul1 = $this.$el.querySelector('#roll1');var ul2 = $this.$el.querySelector('#roll2');var ulbox = document.getElementById("review_box");ul2.innerHTML = ul1.innerHTML;ulbox.scrollTop = 0; // 开始无滚动时设为0setInterval($this.rollStart, t);},rollStart(t){var ul1 = document.getElementById("roll1");var ul2 = document.getElementById("roll2");var ulbox = document.getElementById("review_box");if (ulbox.scrollTop >= ul1.scrollHeight) {ulbox.scrollTop = 0;} else {ulbox.scrollTop++;}},/*项目进度甘特图*/xmjdGantChart(){const day = 24 * 36e5, today = Math.floor(Date.now() / day) * day;var startDay1=Date.parse('2024-09-01');var endDay1=Date.parse('2024-09-03');var startDay2=Date.parse('2024-09-05');var endDay2=Date.parse('2024-09-07')+ (23.9 * 60 * 60 * 1000);//结束时间加一天精确到当天结束（00:00点）const options = {chart: {backgroundColor: 'rgba(0,0,0,0)',},plotOptions: {series: {borderRadius: '50%',connectors: {dashStyle: 'ShortDot',lineWidth: 2,radius: 5,startMarker: {enabled: false}},groupPadding: 0,dataLabels: [{enabled: true,align: 'left',format: '{point.name}',padding: 10,style: {fontWeight: 'normal',textOutline: 'none'}}, {enabled: true,align: 'right',format: '{#if point.completed}{(multiply ' +'point.completed.amount 100):.0f}%{/if}',padding: 10,style: {fontWeight: 'normal',textOutline: 'none',opacity: 0.6}}]}},series: [{name: '工程一类',//类别名称（注意这里！！缺少这里的name属性图表会出不来）data: [{name: '项目一',//项目名称id: '90a784f184c64c729e03fec63e829f7e',//项目idowner: '张总',//项目创建人}, {name: '任务一',//任务名称（任务第一次）id: 'b23d60f2f5bc40d2a55139e07e94df56',//任务iddependency: 'b23d60f2f5bc40d2a55139e07e94df56',//上一次任务所属id(第一次任务可以是他本身的id)parent: '90a784f184c64c729e03fec63e829f7e',//任务父级id（项目id）start: startDay1,//开始时间（时间戳）end: endDay1,//结束时间（时间戳）completed: {amount: 0.2,//完成进度（百分比,0为百分之0,1为百分之百）},owner: '李工',//任务创建人}, {name: '任务二',//任务名称（任务第二次）id: '16fe05c5f6544b118af5ae3e25f2998e',//任务iddependency: 'b23d60f2f5bc40d2a55139e07e94df56',//任务所属id（上一次任务所属id,这个参数可以理解为一个项目可以分为很多次任务完成,此次任务应该接住上一次的任务的id,所以这里应该是第一次任务的id）parent: '90a784f184c64c729e03fec63e829f7e',//任务父级id（项目id）start: startDay2,//开始时间（时间戳）end: endDay2,//结束时间（时间戳）completed: {amount: 1,//完成进度（百分比）},owner: '王工',//任务创建人}]}],tooltip: {pointFormat: '<span style="font-weight: bold">{point.name}</span><br>' +'{point.start:%e %b}' +'{#unless point.milestone} → {point.end:%e %b}{/unless}' +'<br>' +'{#if point.completed}' +'完成进度: {multiply point.completed.amount 100}%<br>' +'{/if}' +'创建人: {#if point.owner}{point.owner}{else}unassigned{/if}'},title: {text: '',enabled: false,},//去水印credits: {enabled: false,},xAxis: [{labels: {style: {color: '#FFFFFF',},},dateTimeLabelFormats: {day: '%e<br><span style="opacity: 0.5; font-size: 0.7em">%a</span>'},grid: {borderWidth: 0},gridLineWidth: 1,}],yAxis: {grid: {borderWidth: 0},gridLineWidth: 0,labels: {style: {color: '#FFFFFF',},symbol: {width: 8,height: 6,x: -4,y: -2}},staticScale: 30},// scrollbar: {// enabled: true,//显示滚动条// },};//图表配置中文显示Highcharts.setOptions({lang:{contextButtonTitle:"图表导出菜单",decimalPoint:".",downloadJPEG:"下载JPEG图片",downloadPDF:"下载PDF文件",downloadPNG:"下载PNG文件",downloadSVG:"下载SVG文件",drillUpText:"返回 {series.name}",loading:"加载中",months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],noData:"没有数据",numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],printChart:"打印图表",resetZoom:"恢复缩放",resetZoomTitle:"恢复图表",shortMonths: [ "一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],thousandsSep:",",weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]}});Highcharts.ganttChart('xmjdgttChart', options);},/*经营专项一览点击查看更多*/onJyzxyl(){console.log(66666)},/*获取经营专项一览数据*/getJyzxData(){axios.get('http://localhost:8080/******/*******', {params: {//参数ID}}).then(function (response) { //请求成功console.log(response);}).catch(function (error) { //请求失败console.log(error);});}}
})
列表无限滚动这里需要用Vue获取页面DOM元素，不能直接使用innerHTML
甘特图配置这里是显示中文
其他的就和常规Echarts图表配置方法一样，细节样式参考官方文档即可
https://www.highcharts.com/demo#highcharts-gantt-demo-highcharts-gantthttps://www.highcharts.com/demo#highcharts-gantt-demo-highcharts-gantt
如果要接后端数据的话用Vue的axios或者ajax请求即可，如果用axios请求的话需要另外引入axios.min.js文件
