Skip to content

G
GaoQuYingJiH5-ASD
Commit 2e866f7c authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

yh

parent 163efa62
Show whitespace changes
Inline Side-by-side
Showing with 387 additions and 213 deletions
sdk/flexible.js
View file @ 2e866f7c
......@@ -2,6 +2,40 @@
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// 获取当前值
const dpr11 = window.devicePixelRatio;
console.log(`设备像素比：${dpr11}`);
function getBrowserInfo() {
const userAgent = navigator.userAgent.toLowerCase();
console.log(userAgent)
let browser = 'Unknown';
// 主流浏览器判断
if (userAgent.includes('edg/')) {
browser = 'Microsoft Edge';
} else if (userAgent.includes('chrome')) {
browser = 'Chrome';
} else if (userAgent.includes('firefox')) {
browser = 'Firefox';
} else if (userAgent.includes('safari')) {
browser = 'Safari';
} else if (userAgent.includes('trident') || userAgent.includes('msie')) {
browser = 'Internet Explorer';
}
// 版本号提取（示例：Chrome/120.0.0.0）
const versionMatch = userAgent.match(/(edg|chrome|firefox|safari|version|rv:)[\s\/:]([\d.]+)/i);
const version = versionMatch ? versionMatch[2] : 'Unknown';
return { browser, version };
}
// 打印日志
const browserInfo = getBrowserInfo();
console.log(`浏览器：${browserInfo.browser}，版本：${browserInfo.version}`);
// adjust body font size
function setBodyFontSize () {
if (document.body) {
......@@ -16,6 +50,7 @@
// set 1rem = viewWidth / 7.5 // 使用7.5， 使得在750px的设计稿中，1rem = 100px换算十分方便！！！！！！！！
function setRemUnit () {
var rem = docEl.clientWidth / 7.5
console.log('rem', rem)
docEl.style.fontSize = rem + 'px'
}
......
src/_shanghu.html
View file @ 2e866f7c
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
......@@ -30,14 +30,27 @@
.detail {
width: 6.88rem;
height: 1.88rem;
/* height: 1.88rem; */
background: #F5F6FA;
border-radius: 0.01rem;
padding-left: 0.2rem;
/* padding-left: 0.2rem; */
padding:0.3rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
/* padding-bottom: 0.1rem;
gap: 0.1rem; */
}
.detail .van-col{
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail span {
font-family: PingFang SC;
font-weight: 500;
......@@ -47,7 +60,7 @@
.func_btn {
width: 6.9rem;
height: 0.9rem;
height: 0.8rem;
background: #1081E3;
border-radius: 0.1rem;
font-family: PingFang SC;
......@@ -110,31 +123,75 @@
.van-field__control {
color: #737373;
}
.subNavWrapper{
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
}
.subNavWrapper .van-tabs--card{
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
border-radius: 0.4rem;
}
.subNavWrapper .van-list{
background: #F5F6FA;
}
.subNavWrapper .van-cell{
margin-bottom: .3rem;
}
.subNavWrapper .van-tabs__nav{
background: #F5F6FA;
}
</style>
</head>
</head>
<body>
<body>
<div id="app">
<div class="wrapper">
<!-- 商户头部信息 -->
<div class="header">
<!-- <div class="level">安全等级</div> -->
<div class="title"><img src="https://dummyimage.com/52x52" alt=""><span>威海市宝威酒店有限公司</span><span
<div class="title"><img src="https://dummyimage.com/26x26" alt=""><span>威海市宝威酒店有限公司</span><span
class="tag">绿</span>
</div>
<div class="detail">
<div><span>场所类型: 小餐饮</span> </div>
<!-- <div><span>场所类型: 小餐饮</span> </div>
<div><span>自查数:15 </span>
<span>检查数:75</span><span>隐患数:95</span><span>未整改:21: 小餐饮</span>
</div>
<div><span>山东省威海市环翠区和谐街35-6</span>
</div>
</div> -->
<van-row>
<van-col span="24">场所类型: 小餐饮</van-col>
</van-row>
<van-row style="margin-top: .3rem; margin-bottom: .3rem;">
<van-col span="6">检查数:75</van-col>
<van-col span="6">检查数:75</van-col>
<van-col span="6">检查数:75</van-col>
<van-col span="6">检查数:75</van-col>
</van-row>
<van-row>
<van-col span="24">山东省威海市环翠区和谐街35-6</van-col>
</van-row>
</div>
</div>
<!-- 功能 -->
<button type="info" class="func_btn">+安全检查</button>
<button type="info" class="func_btn"><span style="font-size: 0.5rem; vertical-align: -0.05rem;">+</span>安全检查</button>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"
......@@ -178,11 +235,45 @@
</van-cell-group>
</div>
<div v-show="activeTab === 1">
<!-- 检查记录列表 -->
<div v-show="activeTab === 1" class="subNavWrapper">
<!-- 隐患记录子Tab -->
<van-tabs v-model:active="subActiveTab" type="card">
<van-tab title="全部"></van-tab>
<van-tab title="待审核"></van-tab>
<van-tab title="待整改"></van-tab>
<van-tab title="已整改"></van-tab>
</van-tabs>
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in checkList" :key="item.id" :title="`检查日期：${item.date}`"
:value="`结果：${item.result}`" value-class="blue-text" />
<van-cell v-for="item in filteredHazards" :key="item.id">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 0.3rem;
font-weight: bold;
font-family: PingFang SC;
">{{ item.description }}</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: space-between; margin: 8px 0;">
<van-tag :type="statusTagType(item.status)">
{{ item.status }}
</van-tag>
<span style="color: #737373; font-size: 0.28rem;margin-left: -1.8rem;">检查时间：{{ item.date }}</span>
<van-icon name="arrow" style="color: #1081E3;" @click="viewDetail(item.id)" />
</div>
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
</div>
</div>
</van-cell>
</van-list>
</div>
......@@ -194,6 +285,26 @@
el: '#app',
data() {
return {
// 新增子Tab数据
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待审核',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待整改',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
// 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据
......@@ -206,12 +317,27 @@
businessHours: '',
type: '', // 新增类型字段
},
checkList: [
{ id: 1, date: '2024-03-15', result: '合格' },
{ id: 2, date: '2024-03-14', result: '不合格' }
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
]
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
// 新增选择确认方法
onConfirmType(value) {
......@@ -221,10 +347,23 @@
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
});
</script>
</body>
</body>
</html>
\ No newline at end of file
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