Skip to content

G
GaoQuYingJiH5-ASD
Commit 8d506d49 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：home-zf

parent 6d04e774
Hide whitespace changes
Inline Side-by-side
Showing with 623 additions and 6 deletions
sdk/util.js
View file @ 8d506d49
......@@ -24,6 +24,15 @@ gemhoUtil.getTargetDateYM = function(dayLength, type) {
var month = tempDate.getMonth() + 1 < 10 ? "0" + (tempDate.getMonth() + 1) : tempDate.getMonth() + 1;
return year + "-" + month;
}
gemhoUtil.getTargetDateYMByPara = function(date) {
var tempDate = date;
var year = tempDate.getFullYear();
var month = tempDate.getMonth() + 1 < 10 ? "0" + (tempDate.getMonth() + 1) : tempDate.getMonth() + 1;
return year + "-" + month;
}
/**
*
* @functionName: getPageName
......
src/_check_list.html
View file @ 8d506d49
......@@ -210,12 +210,21 @@
/* 底部栏 */
.bottom_bar {
position: fixed;
bottom: 0;
display: flex;
justify-content: space-between;
position: fixed;
align-items: center;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
width: 78vw;
border: 1px solid;
width: 83vw;
/* border: 1px solid; */
background: #FFFFFF;
box-shadow: 2px -5px 21px 0px rgba(103,103,103,0.14);
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
.bottom_bar button {
......@@ -294,7 +303,7 @@
<!-- 底部栏 -->
<div class="bottom_bar">
<div style="display: inline-block;">
<div style="display: inline-block; margin-bottom: 0.2rem;">
<van-icon name="apps-o" color="blue" />
<span
style="color: #545454;font-size: 0.28rem;margin-right: 1rem;margin-left: 0.2rem;">{{ notNullCount }}/{{totalItems}}</span>
......
src/_home - 副本.html 0 → 100644
View file @ 8d506d49
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>安全检查管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2/lib/index.css">
<style>
/* 自定义样式 */
.section {
padding: 12px;
background: white;
margin-bottom: 8px;
}
.merchant-info {
display: flex;
align-items: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
}
.stat-item {
text-align: center;
padding: 8px;
background: #f7f8fa;
border-radius: 4px;
}
.function-grid {
margin-top: 12px;
}
.function-card {
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px;
background: white;
border-radius: 4px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一层：安全等级和商家类型 -->
<div class="section">
<div style="display: flex; justify-content: space-between;">
<span>安全等级：A级</span>
<van-tag type="primary">餐饮类</van-tag>
</div>
</div>
<!-- 第二层：商户信息 -->
<div class="section">
<div class="merchant-info">
<van-icon name="shop" size="24px"/>
<div style="margin-left: 12px;">
<div style="display: flex; align-items: center;">
<span>XX商户名称</span>
<div style="width:1px;height:12px;background:#eee;margin:0 8px"></div>
<van-tag plain type="primary">VIP商户</van-tag>
</div>
<div style="color:#969799;font-size:12px;">
<div>场所类型：九小场所</div>
<div>地址：XX路XX号</div>
</div>
</div>
</div>
</div>
<!-- 第三层：统计信息 -->
<div class="section">
<div style="display: flex; justify-content: space-between;">
<span>数据统计</span>
<van-field
readonly
clickable
value="2023-07"
placeholder="选择年月"
style="width:120px"/>
</div>
<div class="stats-grid">
<div class="stat-item">
<div style="font-size:18px;color:#1989fa">75</div>
<div style="font-size:12px;color:#969799">检查数</div>
</div>
<!-- 重复3个相同结构的统计项 -->
</div>
</div>
<!-- 第四层：检查专区 -->
<div class="section">
<van-grid :column-num="2" gutter="8" class="function-grid">
<van-grid-item v-for="item in 6" :key="item">
<div class="function-card">
<div style="display:flex;align-items:center">
<van-icon name="scan" size="16px"/>
<span style="margin-left:4px">扫码检查</span>
<van-icon name="arrow" style="margin-left:auto"/>
</div>
<div style="color:#969799;font-size:12px;margin-top:4px">
功能简介描述
</div>
</div>
</van-grid-item>
</van-grid>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script>
<script>
new Vue({
el: '#app'
});
</script>
</body>
</html>
\ No newline at end of file
src/_home.html 0 → 100644
View file @ 8d506d49
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商户检查页面</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
</style>
</head>
<body>
<div id="app" class="page_wrapper">
<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="second-layer second-layer-zf" v-if="pageType=='ZF'">
<img class="merchant-icon" src="../image/code/zhengfu_logo.png" alt="">
<div class="merchant-info welcome">
<p>欢迎您，<br>进入安全“码”上查 </p>
<div class="user_tag">
<img src="../image/code/user.png" alt="">
<span>日常检查</span>
</div>
</div>
</div>
<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="second-layer" v-show="pageType=='SJ'">
<img class="merchant-icon" src="../image/code/zhengfu_logo.png" alt="商户图标">
<div class="merchant-info">
<div class="name-rank">
<span class="merchant-name">示例商户</span>
<span class="user-rank">用户等级：VIP3</span>
</div>
<div class="divider"></div>
<div class="type-address">
<p>场所类型：餐厅</p>
<p>地址：示例地址</p>
</div>
</div>
</div>
<!-- 第三层：统计信息 -->
<div class="third-layer">
<div class="stats-header">
<div class="stats-title">数据统计</div>
<!-- <van-cell-group> -->
<div @click="showPopup('showPopup4completionDate')" style="position: absolute;
top: 0;
right: .4rem;"><span class="formValue">{{formattedDate}}</span><van-icon name="arrow-down" /></div>
<van-popup v-model="showPopup4completionDate" position="bottom">
<van-datetime-picker v-model="selectedDate" :min-date="minDate" type="year-month" title="选择年月"
@confirm="confirm4completionDate" @cancel="showPopup4completionDate=false" />
</van-popup>
<!-- </van-cell-group> -->
</div>
<div class="stats-content">
<div class="stat-item">
<div class="stat-value">75次</div>
<div class="stat-label">检查数</div>
</div>
<div class="stat-item">
<div class="stat-value">50次</div>
<div class="stat-label">自查数</div>
</div>
<div class="stat-item">
<div class="stat-value">10次</div>
<div class="stat-label">隐患数</div>
</div>
<div class="stat-item">
<div class="stat-value">5次</div>
<div class="stat-label">未整改</div>
</div>
</div>
</div>
<!-- 第四层：检查专区 -->
<div class="fourth-layer">
<h2>检查专区</h2>
<div class="check-modules">
<div class="check-module saoma" >
<p>扫码检查 <van-icon name="arrow" /></p>
<p class="module-intro">扫码进行企业安全检查</p>
</div>
<div class="check-module jiancha" >
<p>检查记录 <van-icon name="arrow" /></p>
<p class="module-intro">查看商家检查自查记录</p>
</div>
<div class="check-module yinhuan" >
<p>隐患审核 <van-icon name="arrow" /></p>
<p class="module-intro">对整改隐患进行审核</p>
</div>
<div class="check-module anquan" >
<p>安全常识 <van-icon name="arrow" /></p>
<p class="module-intro">查看安全常识培训资料</p>
</div>
<div class="check-module shangjia" >
<p>商家信息 <van-icon name="arrow" /></p>
<p class="module-intro">查看商家基础信息</p>
</div>
<div class="check-module zicha" >
<p>安全自查 <van-icon name="arrow" /></p>
<p class="module-intro">进行企业安全自查</p>
</div>
</div>
</div>
</div>
<script>
const currentDate = gemhoUtil.getTargetDateYM();
new Vue({
el: '#app',
data() {
return {
pageType: 'ZF',
showPopup4completionDate: false,
// 控制日期选择器弹窗的显示与隐藏
showPicker: false,
// 存储选择的日期
selectedDate: currentDate, // '', // gemhoUtil.formatDate(new Date(value)),
// 日期选择的最小范围，这里设置为当前日期的前 10 年
minDate: new Date(new Date().getFullYear() - 10, 0),
// 日期选择的最大范围，这里设置为当前日期的后 10 年
maxDate: new Date(new Date().getFullYear() + 10, 11),
checkModules: [{
intro: '提交检查反馈'
},
{
intro: '查看检查历史记录'
},
{
intro: '提交检查反馈'
},
{
intro: '下载检查报告'
},
{
intro: '查看隐患详情'
},
{
intro: '设置检查提醒'
}
]
};
},
computed: {
formattedDate() {
// 检查原始日期是否存在
console.log(this.selectedDate == null)
if (this.selectedDate !== null) {
// 使用 split 方法按 - 分割日期字符串
const [year, month] = this.selectedDate.split('-');
// 拼接成目标格式
return `${year}月${month}日`;
}
return '';
}
},
methods: {
showPopup() {
this['showPopup4completionDate'] = true
},
confirm4completionDate(value) {
console.log('value', value)
this.selectedDate = gemhoUtil.getTargetDateYMByPara(value)
this.showPopup4completionDate = false
},
// 确认选择日期时的回调函数
onConfirm(value) {
// 使用 toLocaleDateString 方法将日期对象格式化为本地日期字符串
this.selectedDate = value.toLocaleDateString();
this.showPicker = false;
},
// 取消选择日期时的回调函数
onCancel() {
this.showPicker = false;
}
},
});
</script>
<style>
.page_wrapper {
background-image: url('../image/code/home_bg6.png');
background-size: contain;
background-repeat: no-repeat;
}
/* 通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f5f5f5;
}
/* 第一层样式 */
.first-layer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: white;
margin-bottom: 10px;
}
.safety-level {
font-size: 16px;
color: #333;
}
/* 第二层样式 */
.second-layer {
position: relative;
display: flex;
align-items: center;
padding: 15px;
background-color: white;
margin-bottom: 0.1rem;
}
.second-layer-zf {
background-color: transparent;
padding-top: 1rem;
padding-left: .6rem;
}
.merchant-icon {
width: 80px;
height: 80px;
border-radius: 8px;
margin-right: 15px;
}
.merchant-info {
flex: 1;
}
.welcome {
font-weight: bold;
font-size: 0.32rem;
color: #FFFFFF;
line-height: 1.8;
letter-spacing: 0.02rem;
}
.welcome .user_tag {
position: absolute;
right: 0.3rem;
top: 0.3rem;
width: 2rem;
height: .48rem;
background: #CFE8FD;
border-radius: .24rem;
font-weight: bold;
font-size: .26rem;
color: #0166BC;
text-align: center;
}
.welcome .user_tag img {
width: 0.25rem;
height: 0.25rem;
}
.name-rank {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.merchant-name {
font-size: 18px;
font-weight: bold;
color: #333;
}
.user-rank {
font-size: 14px;
color: #666;
}
.divider {
height: 1px;
background-color: #eee;
margin-bottom: 10px;
}
.type-address p {
font-size: 14px;
color: #666;
line-height: 1.5;
}
/* 第三层样式 */
.third-layer {
background-color: white;
width: 92vw;
margin: 0 auto;
border-radius: 0.2rem;
margin-bottom: 0.3rem;
}
.stats-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eee;
}
.stats-header .formValue {
font-size: .28rem;
margin-right: .1rem;
}
.stats-header .van-icon:before {
font-size: 0.17rem;
}
.stats-title {
font-size: .36rem;
font-weight: bold;
color: #333;
}
.stats-content {
display: flex;
padding: 15px 0;
}
.stat-item {
flex: 1;
text-align: center;
}
.stat-value {
font-family: PingFang SC;
font-weight: bold;
font-size: .36rem;
color: #1081E3;
margin-bottom: .1rem;
}
.stat-label {
font-family: PingFang SC;
font-weight: bold;
font-size: .3rem;
color: #5B5B5B;
}
/* 第四层样式 */
.fourth-layer {
background-color: white;
padding: .3rem;
width: 92vw;
margin: 0 auto;
border-radius: .1rem;
}
.fourth-layer h2{
font-size: .36rem;
color: #000000;
margin-bottom: .4rem;
}
.check-modules {
display: flex;
flex-wrap: wrap;
gap: .3rem;
}
.check-module {
width: 3rem;
height: 1.8rem;
padding: 15px;
/* border-bottom: 1px solid #eee;
border-right: 1px solid #eee; */
background-image: url('../image/code/bg1.png') ;
background-size: contain;
background-repeat: no-repeat;
}
.check-module p:first-child{
font-weight: bold;
font-size: .32rem;
color: #0C4BA2;
}
.check-module p:last-child{
font-weight: 500;
font-size: .24rem;
color: #4C81CA;
}
.check-module.saoma{
background-image: url('../image/code/bg1.png') ;
}
.check-module.saoma p:first-child{
color: #0C4BA2;
}
.check-module.saoma p:last-child{
color: #4C81CA;
}
.check-module.jiancha{
background-image: url('../image/code/bg2.png') ;
}
.check-module.jiancha p:first-child{
color: #1E7B61;
}
.check-module.jiancha p:last-child{
color: #5CA691;
}
.check-module.yinhuan{
background-image: url('../image/code/bg3.png') ;
}
.check-module.yinhuan p:first-child{
color: #901A14;
}
.check-module.yinhuan p:last-child{
color: #901A14;
}
.check-module.anquan{
background-image: url('../image/code/bg4.png') ;
}
.check-module.anquan p:first-child{
color: #0063A1;
}
.check-module.anquan p:last-child{
color: #5AA1CE;
}
.check-module.shangjia{
background-image: url('../image/code/bg5.png') ;
}
.check-module.shangjia p:first-child{
color: #9E5D15;
}
.check-module.shangjia p:last-child{
color: #CD995F;
}
.check-module.zicha{
background-image: url('../image/code/bg4.png') ;
}
.check-module:nth-child(2n) {
border-right: none;
}
.module-intro {
font-size: 14px;
color: #666;
margin-top: 10px;
}
</style>
</body>
</html>
\ No newline at end of file
src/_shanghu_home.html
View file @ 8d506d49
......@@ -28,7 +28,7 @@
.detail {
width: 6.88rem;
width: 6.5rem;
/* height: 1.88rem; */
background: #F5F6FA;
border-radius: 0.01rem;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment