Commit 1386b9f6 authored by lei's avatar lei

add:安全等级详情页面;home.html.css.js;shanghu_home.html.css.js;

parent f747b514
body { body {
letter-spacing: .02rem; letter-spacing: 0.02rem;
} }
.page_wrapper { .page_wrapper {
background-image: url('image/code/home_bg6.png'); background-image: url('image/code/home_bg6.png');
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* 通用样式 */ /* 通用样式 */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
/* 第一层样式 */ /* 第一层样式 */
.first-layer { .first-layer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
background-color: white; background-color: white;
margin-bottom: 10px; margin-bottom: 10px;
} }
.safety-level { .safety-level {
font-size: 16px; font-size: 16px;
color: #333; color: #333;
} }
/* 第二层样式 */ /* 第二层样式 */
.second-layer { .second-layer {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
background-color: white; background-color: white;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
} }
.second-layer-zf { .second-layer-zf {
background-color: transparent; background-color: transparent;
padding-top: 1rem; padding-top: 1rem;
padding-left: .6rem; padding-left: 0.6rem;
} }
.second-layer-sj { .second-layer-sj {
background-color: transparent; background-color: transparent;
width: 92vw; width: 92vw;
margin: 0 auto; margin: 0 auto;
} }
.second-layer-sj .header { .second-layer-sj .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.2rem 0; padding: 0.2rem 0;
} }
.second-layer-sj .header span { .second-layer-sj .header span {
font-weight: 500; font-weight: 500;
font-size: .3rem; font-size: 0.3rem;
color: #0166BC; color: #0166bc;
} }
.second-layer-sj .header img { .second-layer-sj .header img {
width: 0.25rem; width: 0.25rem;
height: .25rem; height: 0.25rem;
} }
.second-layer-sj .bottom { .second-layer-sj .bottom {
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
border-radius: .2rem; border-radius: 0.2rem;
background-color: #ffffff42; background-color: #ffffff42;
padding: .24rem; padding: 0.24rem;
margin-bottom: -.22rem; margin-bottom: -0.22rem;
} }
.second-layer-sj img { .second-layer-sj img {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
.second-layer-sj .user_tag { .second-layer-sj .user_tag {
width: 1.8rem; width: 1.8rem;
height: .48rem; height: 0.48rem;
line-height: .48rem; line-height: 0.48rem;
background: #CFE8FD; background: #cfe8fd;
border-radius: .24rem; border-radius: 0.24rem;
font-weight: bold; font-weight: bold;
font-size: .26rem; font-size: 0.26rem;
color: #0166BC; color: #0166bc;
text-align: center; text-align: center;
} }
.second-layer-sj .merchant-name { .second-layer-sj .merchant-name {
font-weight: bold; font-weight: bold;
font-size: .34rem; font-size: 0.34rem;
color: #0166BC; color: #0166bc;
} }
.second-layer-sj .name-rank { .second-layer-sj .name-rank {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: start; align-items: start;
gap: .2rem; gap: 0.2rem;
flex-direction: column; flex-direction: column;
margin-bottom: 10px; margin-bottom: 10px;
} }
.second-layer-sj .user-rank { .second-layer-sj .user-rank {
width: 2.4rem; width: 2.4rem;
text-align: center; text-align: center;
height: 0.5rem; height: 0.5rem;
line-height: 0.5rem; line-height: 0.5rem;
background: #00B55E; border-radius: 0.22rem;
border-radius: 0.22rem; font-family: PingFang SC;
font-family: PingFang SC; font-weight: 500;
font-weight: 500; font-size: 0.26rem;
font-size: 0.26rem; color: #ffffff;
color: #FFFFFF; }
.second-layer-sj .green {
background: #00b55e;
}
.second-layer-sj .yellow {
background: rgba(255, 148, 21, 1);
}
.second-layer-sj .red {
background: rgba(255, 33, 49, 1);
} }
.second-layer-sj .type-address p { .second-layer-sj .type-address p {
font-weight: 500; font-weight: 500;
font-size: 0.28rem; font-size: 0.28rem;
color: #1376CA; color: #1376ca;
margin-bottom: .14rem; margin-bottom: 0.14rem;
} }
.merchant-icon { .merchant-icon {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-right: 15px; margin-right: 15px;
} }
.second-layer-zf .merchant-icon { .second-layer-zf .merchant-icon {
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
} }
.merchant-info { .merchant-info {
width: 68vw; width: 68vw;
} }
.welcome { .welcome {
font-weight: bold; font-weight: bold;
font-size: 0.32rem; font-size: 0.32rem;
color: #FFFFFF; color: #ffffff;
line-height: 1.8; line-height: 1.8;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
.welcome .user_tag { .welcome .user_tag {
position: absolute; position: absolute;
right: 0.3rem; right: 0.3rem;
top: 0.3rem; top: 0.3rem;
width: 2rem; width: 2rem;
height: .48rem; height: 0.48rem;
background: #CFE8FD; background: #cfe8fd;
border-radius: .24rem; border-radius: 0.24rem;
font-weight: bold; font-weight: bold;
font-size: .26rem; font-size: 0.26rem;
color: #0166BC; color: #0166bc;
text-align: center; text-align: center;
} }
.welcome .user_tag img { .welcome .user_tag img {
width: 0.25rem; width: 0.25rem;
height: 0.25rem; height: 0.25rem;
} }
.divider { .divider {
height: 1px; height: 1px;
background-color: #eee; background-color: #eee;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* 第三层样式 */ /* 第三层样式 */
.third-layer { .third-layer {
background-color: white; background-color: white;
width: 92vw; width: 92vw;
margin: 0 auto; margin: 0 auto;
border-radius: 0.2rem; border-radius: 0.2rem;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.stats-header { .stats-header {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: .3rem; padding: 0.3rem;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.stats-header .formValue { .stats-header .formValue {
font-size: .28rem; font-size: 0.28rem;
margin-right: .1rem; margin-right: 0.1rem;
} }
.stats-header .van-icon:before { .stats-header .van-icon:before {
font-size: 0.2rem; font-size: 0.2rem;
} }
.stats-title { .stats-title {
font-size: .36rem; font-size: 0.36rem;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.stats-content { .stats-content {
display: flex; display: flex;
padding: .3rem 0; padding: 0.3rem 0;
} }
.stat-item { .stat-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
.stat-value { .stat-value {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
font-size: .36rem; font-size: 0.36rem;
color: #1081E3; color: #1081e3;
margin-bottom: .15rem; margin-bottom: 0.15rem;
} }
.stat-label { .stat-label {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
font-size: .3rem; font-size: 0.3rem;
color: #5B5B5B; color: #5b5b5b;
} }
/* 第四层样式 */ /* 第四层样式 */
.fourth-layer { .fourth-layer {
background-color: white; background-color: white;
padding: .3rem; padding: 0.3rem;
width: 92vw; width: 92vw;
margin: 0 auto; margin: 0 auto;
border-radius: .1rem; border-radius: 0.1rem;
} }
.fourth-layer h2 { .fourth-layer h2 {
font-size: .36rem; font-size: 0.36rem;
color: #000000; color: #000000;
margin-bottom: .4rem; margin-bottom: 0.4rem;
} }
.check-modules { .check-modules {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: .3rem; gap: 0.3rem;
} }
.check-module { .check-module {
width: 3rem; width: 3rem;
height: 1.8rem; height: 1.8rem;
padding: .2rem; padding: 0.2rem;
/* border-bottom: 1px solid #eee; /* border-bottom: 1px solid #eee;
border-right: 1px solid #eee; */ border-right: 1px solid #eee; */
background-image: url('image/code/bg1.png'); background-image: url('image/code/bg1.png');
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: pointer; cursor: pointer;
} }
.check-module p:first-child { .check-module p:first-child {
font-weight: bold; font-weight: bold;
font-size: .32rem; font-size: 0.32rem;
color: #0C4BA2; color: #0c4ba2;
margin-bottom: .2rem; margin-bottom: 0.2rem;
} }
.check-module p:last-child { .check-module p:last-child {
font-weight: 500; font-weight: 500;
font-size: .24rem; font-size: 0.24rem;
color: #4C81CA; color: #4c81ca;
} }
.check-module.saoma { .check-module.saoma {
background-image: url('image/code/bg1.png'); background-image: url('image/code/bg1.png');
} }
.check-module.saoma p:first-child { .check-module.saoma p:first-child {
color: #0C4BA2; color: #0c4ba2;
} }
.check-module.saoma p:last-child { .check-module.saoma p:last-child {
color: #4C81CA; color: #4c81ca;
} }
.check-module.jiancha { .check-module.jiancha {
background-image: url('image/code/bg2.png'); background-image: url('image/code/bg2.png');
} }
.check-module.jiancha p:first-child { .check-module.jiancha p:first-child {
color: #1E7B61; color: #1e7b61;
} }
.check-module.jiancha p:last-child { .check-module.jiancha p:last-child {
color: #5CA691; color: #5ca691;
} }
.check-module.yinhuan { .check-module.yinhuan {
background-image: url('image/code/bg3.png'); background-image: url('image/code/bg3.png');
} }
.check-module.yinhuan p:first-child { .check-module.yinhuan p:first-child {
color: #901A14; color: #901a14;
} }
.check-module.yinhuan p:last-child { .check-module.yinhuan p:last-child {
color: #901A14; color: #901a14;
} }
.check-module.anquan { .check-module.anquan {
background-image: url('image/code/bg4.png'); background-image: url('image/code/bg4.png');
} }
.check-module.anquan p:first-child { .check-module.anquan p:first-child {
color: #0063A1; color: #0063a1;
} }
.check-module.anquan p:last-child { .check-module.anquan p:last-child {
color: #5AA1CE; color: #5aa1ce;
} }
.check-module.shangjia { .check-module.shangjia {
background-image: url('image/code/bg5.png'); background-image: url('image/code/bg5.png');
} }
.check-module.shangjia p:first-child { .check-module.shangjia p:first-child {
color: #9E5D15; color: #9e5d15;
} }
.check-module.shangjia p:last-child { .check-module.shangjia p:last-child {
color: #CD995F; color: #cd995f;
} }
.check-module.zicha { .check-module.zicha {
background-image: url('image/code/bg4.png'); background-image: url('image/code/bg4.png');
} }
.check-module:nth-child(2n) { .check-module:nth-child(2n) {
border-right: none; border-right: none;
} }
.module-intro { .module-intro {
font-size: .24rem; font-size: 0.24rem;
color: #666; color: #666;
margin-top: .1rem; margin-top: 0.1rem;
} }
\ No newline at end of file
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
id="app" id="app"
class="page_wrapper" class="page_wrapper"
v-cloak v-cloak
v-if="!['consumers'].includes(userInfo.userType)" v-if="!['consumers'].includes(userInfo.userType)"
> >
<!-- 第二层:商户图标、名称、等级、场所类型和地址 --> <!-- 第二层:商户图标、名称、等级、场所类型和地址 -->
<div <div
...@@ -103,7 +103,24 @@ ...@@ -103,7 +103,24 @@
<div class="merchant-info"> <div class="merchant-info">
<div class="name-rank"> <div class="name-rank">
<span class="merchant-name">{{userInfo.unitName}}</span> <span class="merchant-name">{{userInfo.unitName}}</span>
<span class="user-rank">安全等级:绿</span> <span
class="user-rank green"
v-if="userInfo.safeLevel==0"
@click="gotoPage('anquan_level')"
>安全等级:绿</span
>
<span
class="user-rank yellow"
v-if="userInfo.safeLevel==1"
@click="gotoPage('anquan_level')"
>安全等级:黄</span
>
<span
class="user-rank red"
v-if="userInfo.safeLevel==2"
@click="gotoPage('anquan_level')"
>安全等级:红</span
>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="type-address"> <div class="type-address">
......
...@@ -38,12 +38,13 @@ window.onload = function () { ...@@ -38,12 +38,13 @@ window.onload = function () {
}, },
], ],
userInfo: { userInfo: {
userType: 'sj1', // 登录用户type userType: 'sj1', // 登录用户type
userType: 'consumers', // 登录用户type userType: 'consumers', // 登录用户type
userId: '1', // 登录用户id userId: '1', // 登录用户id
userName: '张三', // 登录用户name userName: '张三', // 登录用户name
deptId: '1', // 登录用户部门id deptId: '1', // 登录用户部门id
deptName: '部门1', // 登录用户部门name deptName: '部门1', // 登录用户部门name
safeLevel: '0', //0:绿、1:黄、2:红
role: 'dudao', role: 'dudao',
roleName: '', roleName: '',
}, },
...@@ -167,7 +168,10 @@ window.onload = function () { ...@@ -167,7 +168,10 @@ window.onload = function () {
navTo(url) { navTo(url) {
// gemhoUtil.nav2asd(url) // gemhoUtil.nav2asd(url)
}, },
gotoPage(stringifyUrl) {
let url = gemhoUtil.setParameter(`src/_${stringifyUrl}.html`)
gemhoUtil.navigatePage(url, '跳转中...')
},
init() { init() {
// 在组件挂载后执行 // 在组件挂载后执行
// 调用你的方法 // 调用你的方法
...@@ -217,7 +221,7 @@ window.onload = function () { ...@@ -217,7 +221,7 @@ window.onload = function () {
}, },
}, },
(res) => { (res) => {
console.log(JSON.parse(res), 'JSON.parse(res)') console.log(JSON.parse(res), 'JSON.parse(res)')
if (!res) { if (!res) {
// 中台返回为undefined 重新请求 // 中台返回为undefined 重新请求
vant.Toast.clear() vant.Toast.clear()
...@@ -237,6 +241,7 @@ window.onload = function () { ...@@ -237,6 +241,7 @@ window.onload = function () {
userId: '1', // 登录用户id userId: '1', // 登录用户id
userName: '张三', // 登录用户name userName: '张三', // 登录用户name
deptId: '1', // 登录用户部门id deptId: '1', // 登录用户部门id
safeLevel: result.data.merchantInfoNumVo?.safeLevel, //0:绿、1:黄、2:红
deptName: result.data.roleDeptNameVo.deptName, // 登录用户部门name deptName: result.data.roleDeptNameVo.deptName, // 登录用户部门name
businessAddress: businessAddress:
result.data.merchantInfoNumVo?.businessAddress, // result.data.merchantInfoNumVo?.businessAddress, //
...@@ -248,32 +253,32 @@ window.onload = function () { ...@@ -248,32 +253,32 @@ window.onload = function () {
merId: result.data.merchantInfoNumVo?.id, // merId: result.data.merchantInfoNumVo?.id, //
} }
gemhoUtil.setCookie('userType', this.userInfo.userType) gemhoUtil.setCookie('userType', this.userInfo.userType)
if(this.userInfo.userType === 'consumers'){ // 2025年5月14日新增消费者逻辑 if (this.userInfo.userType === 'consumers') { // 2025年5月14日新增消费者逻辑
// 根据url地址的merid获取商户信息 // 根据url地址的merid获取商户信息
if(gemhoUtil.getParameter('merId')){ // 消费者直接在爱山东扫商户码进入首页 if (gemhoUtil.getParameter('merId')) { // 消费者直接在爱山东扫商户码进入首页
// this.getMerInfo() // this.getMerInfo()
param = { param = {
merId: gemhoUtil.getParameter('merId'), merId: gemhoUtil.getParameter('merId'),
pageName: 'src/_consumer_home', pageName: 'src/_consumer_home',
} }
let url = gemhoUtil.setParameter(`${param.pageName}.html`, param) let url = gemhoUtil.setParameter(`${param.pageName}.html`, param)
gemhoUtil.navigatePage(url, '跳转中...') gemhoUtil.navigatePage(url, '跳转中...')
return return
}else{ // 消费者不扫码后,直接退出到爱山东首页。(用户直接在爱山东点击应用进入首页) } else { // 消费者不扫码后,直接退出到爱山东首页。(用户直接在爱山东点击应用进入首页)
vant.Dialog.alert({ vant.Dialog.alert({
title: '信息提示', title: '信息提示',
message: '请扫描商户码访问~', message: '请扫描商户码访问~',
}).then(() => { // 关闭当前访问页面回到爱山东 }).then(() => { // 关闭当前访问页面回到爱山东
lightAppJssdk.navigation.close({ lightAppJssdk.navigation.close({
success: function (data) { }, success: function (data) { },
fail: function (data) { }, fail: function (data) { },
}) })
}); });
} }
return return
}else if (this.userInfo.userType === 'shop') { } else if (this.userInfo.userType === 'shop') {
this.defaultMenuList[1].navTo = 'checkrecord' this.defaultMenuList[1].navTo = 'checkrecord'
} else { } else {
this.defaultMenuList[1].navTo = 'shanghu_list' this.defaultMenuList[1].navTo = 'shanghu_list'
...@@ -317,7 +322,7 @@ window.onload = function () { ...@@ -317,7 +322,7 @@ window.onload = function () {
pageSize: this.size, pageSize: this.size,
date: this.selectedDate, date: this.selectedDate,
sort: 'lawId,desc', sort: 'lawId,desc',
merId: gemhoUtil.getParameter('merId'), merId: gemhoUtil.getParameter('merId'),
}, },
}, },
(res) => { (res) => {
...@@ -348,6 +353,6 @@ window.onload = function () { ...@@ -348,6 +353,6 @@ window.onload = function () {
return `${year}${month}月` return `${year}${month}月`
}, },
}, },
}) })
} }
...@@ -10,14 +10,14 @@ axios.defaults.headers.post['Content-Type'] = 'application/json' ...@@ -10,14 +10,14 @@ axios.defaults.headers.post['Content-Type'] = 'application/json'
// axios.defaults.headers.common['Authorization'] = gemhoUtil.getCookie('token') // axios.defaults.headers.common['Authorization'] = gemhoUtil.getCookie('token')
// 消费者token // // 消费者token
axios.defaults.headers.common['Authorization'] = // axios.defaults.headers.common['Authorization'] =
'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtojotLnogIUiLCJsb2dpbl91c2VyX2tleSI6ImExNWIwMDNjLWRlYWItNGU2MC04ODg4LTJiODNjMzVkNDUzNSJ9.l6gHzFX-U5rKGJ7zoDA4jMBIxkhVgCjWr5ynFg1DR6xspM9Ls6raTxyEo2Kr61UbG2UD6P2kN63vF_U8nX8afg' // 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtojotLnogIUiLCJsb2dpbl91c2VyX2tleSI6ImExNWIwMDNjLWRlYWItNGU2MC04ODg4LTJiODNjMzVkNDUzNSJ9.l6gHzFX-U5rKGJ7zoDA4jMBIxkhVgCjWr5ynFg1DR6xspM9Ls6raTxyEo2Kr61UbG2UD6P2kN63vF_U8nX8afg'
// // 商户token // 商户token
// axios.defaults.headers.common['Authorization'] = axios.defaults.headers.common['Authorization'] =
// 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLlvKDlrZ3lvakiLCJsb2dpbl91c2VyX2tleSI6ImYzZDMwY2Q4LWY5ODAtNGE0NC1iNzE1LTZiMTJlNGQyZTQ1OCJ9.HjtdJuJS7NjTw4GMaAtDtOeA2EnF75pXVQefzwkdrxQdxyHB6L8h0XhKSB5A_YMsznQMd4DZrGZ5TPEmc1fueg' 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxMzg2MzE1OTk4NyIsImxvZ2luX3VzZXJfa2V5IjoiMDc1ZWVkOGUtYjZjNC00OTE3LWJlYjYtY2RhOTBmYWY2YTkwIn0.7IcT8J7AGWR7vlesikjZvDYYvSY46TKIU2F41g8V7z6naxJQOlOKt-IXTzTo2QmlSF5Eo7hbxfTy7OJxdT4MWw'
// admin账号token // admin账号token
// axios.defaults.headers.common['Authorization'] = // axios.defaults.headers.common['Authorization'] =
......
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
line-height: 1.5;
color: #333;
background-color: #f8f8f8;
padding-bottom: 20px;
}
/* 表格样式 */
.table-container {
margin: 15px;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 12px 15px;
text-align: center;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}
/* 最后一列去除右边框 */
th:last-child,
td:last-child {
border-right: none;
}
th {
font-size: 20px;
color: #666;
font-weight: bold;
}
td {
font-size: 16px;
}
/* 等级标识样式 */
.level-icon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
vertical-align: middle;
text-align: center;
line-height: 24px;
color: #fff;
}
.green .level-icon {
background-color: #4caf50;
}
.yellow .level-icon {
background-color: #ffc107;
}
.red .level-icon {
background-color: #f44336;
}
/* 第一列宽度调整 */
th:first-child,
td:first-child {
width: 100px;
}
/* 最后一行去除下边框 */
tr:last-child td {
border-bottom: none;
}
/* 注释样式 */
.note {
margin: 15px;
font-size: 12px;
color: #999;
line-height: 1.4;
}
<!DOCTYPE html>
<html>
<head>
<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>
</head>
</head>
<body>
<div id="app">
<div class="wrapper" >
<van-nav-bar
title="安全等级说明"
left-arrow
@click-left="onClickLeft"
></van-nav-bar>
<div class="table-container">
<table>
<thead>
<tr>
<th>等级</th>
<th>判定条件</th>
</tr>
</thead>
<tbody>
<tr class="green">
<td><span class="level-icon">绿</span></td>
<td>1个月内自查数≥1次 且 超期未整改≤2次</td>
</tr>
<tr class="yellow">
<td><span class="level-icon"></span></td>
<td>1个月内自查数=0 或 超期未整改>2次</td>
</tr>
<tr class="red">
<td><span class="level-icon"></span></td>
<td>2个月内自查数=0 或 超期未整改>4次</td>
</tr>
</tbody>
</table>
</div>
<p class="note">注:等级根据企业自查、整改数据实时变动</p>
</div>
</div>
</body>
</html>
\ No newline at end of file
/**
* author: dabao
* date: 2024-03-15
* description: 安全等级
*/
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
}
},
methods: {
// 跳转
onClickLeft() {
window.history.back()
}
}
});
})
\ No newline at end of file
/* 基础样式 */ /* 基础样式 */
html, html,
body { body {
background-color: #fff; background-color: #fff;
letter-spacing: .01rem; letter-spacing: 0.01rem;
} }
/* 通用工具类 */ /* 通用工具类 */
.pd-01rem { .pd-01rem {
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
} }
/* 表单相关 */ /* 表单相关 */
.formValue { .formValue {
float: right; float: right;
} }
.formSubmitBtnWrapper { .formSubmitBtnWrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 0.2rem; margin-top: 0.2rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.formSubmitBtnWrapper .van-button { .formSubmitBtnWrapper .van-button {
width: 4rem; width: 4rem;
} }
/* 框架样式覆盖修改 */ /* 框架样式覆盖修改 */
.checklist-container .van-cell__value { .checklist-container .van-cell__value {
overflow: unset; overflow: unset;
background-color: #f5f6fa; background-color: #f5f6fa;
} }
.checklist-container .van-cell:after { .checklist-container .van-cell:after {
border-bottom: none; border-bottom: none;
} }
.checklist-container .van-radio-group--horizontal { .checklist-container .van-radio-group--horizontal {
float: left; float: left;
} }
.checklist-container .van-checkbox { .checklist-container .van-checkbox {
width: auto; width: auto;
float: left; float: left;
margin-right: .3rem; margin-right: 0.3rem;
margin-bottom: .2rem; margin-bottom: 0.2rem;
} }
.checklist-container .van-checkbox__label, .checklist-container .van-checkbox__label,
.checklist-container .van-radio__label { .checklist-container .van-radio__label {
font-size: 0.28rem; font-size: 0.28rem;
} }
.checklist-container .van-checkbox__icon, .checklist-container .van-checkbox__icon,
.checklist-container .van-radio__icon { .checklist-container .van-radio__icon {
font-size: 0.34rem; font-size: 0.34rem;
background-color: #fff; background-color: #fff;
} }
.checklist-container .van-radio { .checklist-container .van-radio {
margin: .2rem 0 0.2rem 0.8rem; margin: 0.2rem 0 0.2rem 0.8rem;
} }
.checklist-container .van-cell { .checklist-container .van-cell {
background: #f5f6fa; background: #f5f6fa;
margin-top: 0.2rem; margin-top: 0.2rem;
padding: 0; padding: 0;
} }
/* 表单内的表项 背景色覆盖 */ /* 表单内的表项 背景色覆盖 */
.van-form { .van-form {
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left: .3rem; padding-left: 0.3rem;
} }
.van-form .van-field__label{ .van-form .van-field__label {
width: 1.8rem; width: 1.8rem;
} }
.van-form .van-field__control{ .van-form .van-field__control {
text-align: right; text-align: right;
padding-right: .3rem; padding-right: 0.3rem;
} }
.van-form .van-cell,
.van-form .van-cell, .van-form .van-cell__value {
.van-form .van-cell__value { background: #fff;
background: #fff; }
.yh_desc {
} width: 6.2rem;
.yh_desc{ min-height: 0.68rem;
width: 6.2rem; background: rgb(238, 238, 238);
min-height: 0.68rem; border-radius: 0.04rem;
background: rgb(238, 238, 238); border: 0px solid rgb(191, 191, 191);
border-radius: 0.04rem; padding: 0.2rem;
border: 0px solid rgb(191, 191, 191); font-size: 0.28rem;
padding: .2rem; font-weight: 500;
font-size: 0.28rem; color: #545454;
font-weight: 500; }
color: #545454;
} .checklist-container .van-cell-group {
background-color: #f5f6fa;
.checklist-container .van-cell-group { }
background-color: #f5f6fa;
} .checklist-container textarea {
background-color: #fff !important;
.checklist-container textarea { }
background-color: #fff !important;
} .checklist-container .van-uploader__upload {
background-color: #fff;
.checklist-container .van-uploader__upload { }
background-color: #fff;
} .limit_date_wrapper .van-field__label {
width: 1.3rem;
.limit_date_wrapper .van-field__label { }
width: 1.3rem;
} .checklist-container .van-icon-apps-o:before,
.checklist-container .van-icon-fire-o:before {
.checklist-container .van-icon-apps-o:before, font-size: 0.32rem;
.checklist-container .van-icon-fire-o:before { }
font-size: 0.32rem;
} /* 检查清单容器 */
.checklist-container {
/* 检查清单容器 */ /* padding: 12px; */
.checklist-container { background: #fff;
/* padding: 12px; */ overflow: hidden;
background: #fff; padding-bottom: 2rem;
overflow: hidden; }
padding-bottom: 2rem;
} /* 检查项 */
.check-item {
/* 检查项 */ background: white;
.check-item { float: left;
background: white; }
float: left;
} .item-header {
display: flex;
.item-header { align-items: center;
display: flex; margin: 0.3rem 0px 0.1rem 0.3rem;
align-items: center; }
margin: .3rem 0px .1rem .3rem;
} .item-number {
}
.item-number {}
.item-title {
.item-title { font-size: 0.28rem;
font-size: 0.28rem; }
}
.item_title {
.item_title { font-size: 0.3rem;
font-size: 0.3rem; color: #1081e3;
color: #1081E3; font-weight: bold;
font-weight: bold; position: relative;
position: relative; padding-left: 0.2rem;
padding-left: 0.2rem; margin-left: 0.2rem;
margin-left: .2rem; }
}
.item_title::before {
.item_title::before { content: '';
content: ''; display: block;
display: block; width: 0.05rem;
width: 0.05rem; height: 0.32rem;
height: 0.32rem; background-color: #1081e3;
background-color: #1081E3; position: absolute;
position: absolute; left: 0;
left: 0; top: 0;
top: 0; }
}
/* 展开部分 */
/* 展开部分 */ .expand-section {
.expand-section { width: calc(7.5rem - 0.6rem);
width: calc(7.5rem - 0.6rem); float: left;
float: left; background: #f5f6fa;
background: #f5f6fa; padding: 0.1rem 0.3rem;
padding: 0.1rem 0.3rem; }
} /* 图片预览大小 */
/* 图片预览大小 */ .expand-section .van-uploader__preview-image {
.expand-section .van-uploader__preview-image { display: block;
display: block; width: 1.4rem;
width: 1.4rem; height: 1.4rem;
height: 1.4rem; overflow: hidden;
overflow: hidden; }
}
/* 子复选框组 */
/* 子复选框组 */ .sub-checkbox-group {
.sub-checkbox-group { display: flex;
display: flex; flex-wrap: wrap;
flex-wrap: wrap; gap: 0.2rem;
gap: 0.2rem; margin: 0.2rem 0 0.3rem 0;
margin: .2rem 0 .3rem 0; }
}
/* 上传器 */
/* 上传器 */ .uploader-wrapper {
.uploader-wrapper { --van-uploader-size: 80px;
--van-uploader-size: 80px; }
}
/* 截止日期选择器 */
/* 截止日期选择器 */ .deadline-picker {
.deadline-picker { display: flex;
display: flex; gap: 12px;
gap: 12px; margin: 12px 0;
margin: 12px 0; }
}
/* 检查清单头部 */
/* 检查清单头部 */ .checklist-header p {
.checklist-header p { background-color: rgb(25, 137, 250);
background-color: rgb(25, 137, 250); color: rgb(255, 255, 255);
color: rgb(255, 255, 255); font-size: 0.26rem;
font-size: 0.26rem; padding: 0.2rem 0.3rem 0.2rem;
padding: 0.2rem 0.3rem 0.2rem; line-height: 0.39999rem;
line-height: 0.39999rem; margin: 0;
margin: 0; }
}
.checklist-header h5 {
.checklist-header h5 { font-size: 0.32rem;
font-size: 0.32rem; text-align: center;
text-align: center; }
}
/* 必填标题 */
/* 必填标题 */ .title_require {
.title_require { position: relative;
position: relative; padding: 0;
padding: 0; margin: 0;
margin: 0; margin-top: 0.1rem;
margin-top: 0.1rem; padding-left: 0.2rem;
padding-left: 0.2rem; font-size: 0.28rem;
font-size: .28rem; }
}
.title_require::before {
.title_require::before { position: absolute;
position: absolute; content: '*';
content: '*'; color: #ee0a24;
color: #ee0a24; font-size: inherit;
font-size: inherit; left: 0;
left: 0; top: 50%;
top: 50%; transform: translateY(-50%);
transform: translateY(-50%); }
}
/* 底部栏 */
/* 底部栏 */ .bottom_bar {
.bottom_bar { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; position: fixed;
position: fixed; align-items: center;
align-items: center; bottom: 0.5rem;
bottom: 0.5rem; left: 50%;
left: 50%; transform: translateX(-50%);
transform: translateX(-50%); width: 88vw;
width: 88vw; /* border: 1px solid; */
/* border: 1px solid; */ background: #ffffff;
background: #FFFFFF; box-shadow: 2px -5px 21px 0px rgba(103, 103, 103, 0.14);
box-shadow: 2px -5px 21px 0px rgba(103, 103, 103, 0.14); padding-top: 0.2rem;
padding-top: 0.2rem; padding-bottom: 0.2rem;
padding-bottom: 0.2rem; padding-left: 0.2rem;
padding-left: 0.2rem; padding-right: 0.2rem;
padding-right: 0.2rem; }
}
.bottom_bar > div {
.bottom_bar>div { display: grid;
display: grid; grid-template-columns: auto auto 0.6fr;
grid-template-columns: auto auto .6fr; padding-left: 0.2rem;
padding-left: .2rem; align-items: center;
align-items: center; gap: 0.2rem;
gap: 0.2rem; width: 100vw;
width: 100vw; }
}
.bottom_bar > div > span {
.bottom_bar>div>span { font-weight: 500;
font-weight: 500; font-size: 0.28rem;
font-size: 0.28rem; color: #545454;
color: #545454; display: inline-block;
display: inline-block; /* width: 1.8rem; */
/* width: 1.8rem; */ }
}
.bottom_bar > div > span:before {
.bottom_bar>div>span:before { display: inline-block;
display: inline-block; width: 0.3rem;
width: 0.3rem; height: 0.3rem;
height: 0.3rem; content: '*';
content: '*'; color: #fff;
color: #fff; background-size: cover;
background-size: cover; font-weight: 500;
font-weight: 500; margin-right: 0.1rem;
margin-right: 0.1rem; }
}
.bottom_bar > div > span:first-child:before {
.bottom_bar>div>span:first-child:before { background-image: url('../image/code/check_num.png');
background-image: url('../image/code/check_num.png'); }
}
.bottom_bar > div > span:nth-child(2):before {
.bottom_bar>div>span:nth-child(2):before { background-image: url('../image/code/yh_num.png');
background-image: url('../image/code/yh_num.png'); }
}
.bottom_bar button {
color: #fff;
.bottom_bar button { }
color: #fff;
} .day_select {
border-color: rgb(191, 191, 191);
.day_select { margin-right: 0.1rem;
border-color: rgb(191, 191, 191); width: 1rem;
margin-right: 0.1rem; padding-left: 0.2rem;
width: 1rem; background-color: #fff;
padding-left: .2rem; }
background-color: #fff;
}
\ No newline at end of file
html, html,
body { body {
letter-spacing: .01rem; letter-spacing: 0.01rem;
} }
.wrapper { .wrapper {
/* padding: 0.2rem; */ /* padding: 0.2rem; */
background-color: #fff; background-color: #fff;
} }
.header { .header {
padding: .2rem; padding: 0.2rem;
} }
.header .title { .header .title {
font-weight: bold; font-weight: bold;
font-size: 0.32rem; font-size: 0.32rem;
color: #000000; color: #000000;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
gap: 0.2rem; gap: 0.2rem;
padding: 0.3rem 0.3rem; padding: 0.3rem 0.3rem;
} }
.header .title img { .header .title img {
width: 0.51rem; width: 0.51rem;
height: 0.52rem; height: 0.52rem;
} }
.detail { .detail {
width: 6.5rem; width: 6.5rem;
/* height: 1.88rem; */ /* height: 1.88rem; */
background: #F5F6FA; background: #f5f6fa;
border-radius: 0.01rem; border-radius: 0.01rem;
/* padding-left: 0.2rem; */ /* padding-left: 0.2rem; */
padding: 0.3rem; padding: 0.3rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
display: flex; display: flex;
align-items: start; align-items: start;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
/* padding-bottom: 0.1rem; /* padding-bottom: 0.1rem;
gap: 0.1rem; */ gap: 0.1rem; */
} }
.detail .van-col { .detail .van-col {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.28rem; font-size: 0.28rem;
color: #737373; color: #737373;
} }
.detail span { .detail span {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.28rem; font-size: 0.28rem;
color: #737373; color: #737373;
} }
.detail .detail_link { .detail .detail_link {
position: absolute; position: absolute;
right: .3rem; right: 0.3rem;
font-size: .26rem; font-size: 0.26rem;
color: #1081E3; color: #1081e3;
cursor: pointer; cursor: pointer;
} }
.func_btn { .func_btn {
width: 7.12rem; width: 7.12rem;
height: 0.8rem; height: 0.8rem;
background: #1081E3; background: #1081e3;
border-radius: 0.1rem; border-radius: 0.1rem;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.3rem; font-size: 0.3rem;
color: #FFFFFF; color: #ffffff;
margin: 0 auto; margin: 0 auto;
border-width: 0; border-width: 0;
margin-left: .2rem; margin-left: 0.2rem;
cursor: pointer; cursor: pointer;
} }
.func_btn span { .func_btn span {
font-size: 0.5rem; font-size: 0.5rem;
vertical-align: -0.05rem; vertical-align: -0.05rem;
margin-right: .1rem; margin-right: 0.1rem;
} }
.tag { .tag {
display: inline-block; display: inline-block;
width: 1.9rem; width: 1.9rem;
height: 0.42rem; height: 0.42rem;
line-height: 0.42rem; line-height: 0.42rem;
text-align: center; text-align: center;
background: #00B55E; border-radius: 21px;
border-radius: 21px; font-weight: 500;
font-weight: 500; font-size: 0.28rem;
font-size: 0.28rem; color: #ffffff;
color: #FFFFFF; }
.green {
background: #00b55e;
}
.yellow {
background: rgba(255, 148, 21, 1);
}
.red {
background: rgba(255, 33, 49, 1);
} }
/* 添加以下样式 */ /* 添加以下样式 */
.van-tabs__line { .van-tabs__line {
background-color: #1989fa; background-color: #1989fa;
} }
.blue-text { .blue-text {
color: #1989fa; color: #1989fa;
font-weight: 500; font-weight: 500;
} }
.van-list { .van-list {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
margin: 0 0.1rem; margin: 0 0.1rem;
} }
.subNavWrapper .van-cell { .subNavWrapper .van-cell {
padding: 12px 10px; padding: 12px 10px;
} }
.van-tab { .van-tab {
color: #000; color: #000;
} }
.van-tab__text { .van-tab__text {
font-weight: bold; font-weight: bold;
font-size: 0.3rem; font-size: 0.3rem;
/* color: #000; */ /* color: #000; */
} }
.van-tab--active { .van-tab--active {
color: #1081e3;
color: #1081E3;
} }
.van-field__label { .van-field__label {
font-weight: bold; font-weight: bold;
} }
.van-field__control { .van-field__control {
color: #737373; color: #737373;
} }
.subNavWrapper { .subNavWrapper {
background-color: #F5F6FA; background-color: #f5f6fa;
padding: 0.2rem 0.2rem; padding: 0.2rem 0.2rem;
margin-top: -0.3rem; margin-top: -0.3rem;
} }
.subNavWrapper .van-tab__text { .subNavWrapper .van-tab__text {
color: #5B5B5B; color: #5b5b5b;
} }
.subNavWrapper .van-tab--active span { .subNavWrapper .van-tab--active span {
color: #fff; color: #fff;
font-size: 0.28rem; font-size: 0.28rem;
} }
.subNavWrapper .van-tabs__nav--card { .subNavWrapper .van-tabs__nav--card {
border: none !important; border: none !important;
} }
.subNavWrapper .van-tabs--card { .subNavWrapper .van-tabs--card {
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.subNavWrapper .van-tabs__nav--card .van-tab { .subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B; color: #5b5b5b;
border: none !important; border: none !important;
} }
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active { .subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF; color: #ffffff;
background: #58A5E8; background: #58a5e8;
border-radius: 0.4rem; border-radius: 0.4rem;
} }
.subNavWrapper .van-list { .subNavWrapper .van-list {
background: #F5F6FA; background: #f5f6fa;
} }
.subNavWrapper .van-cell { .subNavWrapper .van-cell {
margin-bottom: .3rem; margin-bottom: 0.3rem;
} }
.subNavWrapper .van-tabs__nav { .subNavWrapper .van-tabs__nav {
background: #F5F6FA; background: #f5f6fa;
margin: 0; margin: 0;
} }
.navToBtn { .navToBtn {
color: #5B5B5B; color: #5b5b5b;
font-size: .36rem; font-size: 0.36rem;
margin-top: .04rem; margin-top: 0.04rem;
position: absolute; position: absolute;
right: 0; right: 0;
} }
\ No newline at end of file
...@@ -15,7 +15,10 @@ ...@@ -15,7 +15,10 @@
<div class="header"> <div class="header">
<!-- <div class="level">安全等级</div> --> <!-- <div class="level">安全等级</div> -->
<div class="title"> <div class="title">
<img src="../image/code/sj.png" alt=""><span>{{merInformation.unitName}}</span><span class="tag">安全等级-绿</span> <img src="../image/code/sj.png" alt=""><span>{{merInformation.unitName}}</span>
<span class="tag green" v-if="merInformation.safeLevel==0" @click="gotoPage('anquan_level')">安全等级-绿</span>
<span class="tag yellow" v-if="merInformation.safeLevel==1" @click="gotoPage('anquan_level')">安全等级-黄</span>
<span class="tag red" v-if="merInformation.safeLevel==2" @click="gotoPage('anquan_level')">安全等级-红</span>
</div> </div>
<div class="detail"> <div class="detail">
<van-row> <van-row>
......
...@@ -85,6 +85,10 @@ window.addEventListener("load", function () { ...@@ -85,6 +85,10 @@ window.addEventListener("load", function () {
} }
}, },
gotoPage(stringifyUrl) {
let url = gemhoUtil.setParameter(`src/_${stringifyUrl}.html`)
gemhoUtil.navigatePage(url, '跳转中...')
},
// 新增选择确认方法 // 新增选择确认方法
onConfirmType(value) { onConfirmType(value) {
this.formData.type = value; this.formData.type = value;
......
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