Skip to content

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

yh

parent 163efa62
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 213 deletions
sdk/flexible.js
View file @ 2e866f7c
...@@ -2,6 +2,40 @@ ...@@ -2,6 +2,40 @@
var docEl = document.documentElement var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1 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 // adjust body font size
function setBodyFontSize () { function setBodyFontSize () {
if (document.body) { if (document.body) {
...@@ -16,6 +50,7 @@ ...@@ -16,6 +50,7 @@
// set 1rem = viewWidth / 7.5 // 使用7.5， 使得在750px的设计稿中，1rem = 100px换算十分方便！！！！！！！！ // set 1rem = viewWidth / 7.5 // 使用7.5， 使得在750px的设计稿中，1rem = 100px换算十分方便！！！！！！！！
function setRemUnit () { function setRemUnit () {
var rem = docEl.clientWidth / 7.5 var rem = docEl.clientWidth / 7.5
console.log('rem', rem)
docEl.style.fontSize = rem + 'px' docEl.style.fontSize = rem + 'px'
} }
......
src/_shanghu.html
View file @ 2e866f7c
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" <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"> content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title> <title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script> <script type="text/javascript" src="../sdk/includeHead.js"></script>
<style> <style>
.wrapper { .wrapper {
padding: 0.2rem; padding: 0.2rem;
background-color: #fff; background-color: #fff;
} }
.header {} .header {}
.header .title { .header .title {
font-weight: 500; font-weight: 500;
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;
} }
.detail { .detail {
width: 6.88rem; width: 6.88rem;
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; */
margin-bottom: 0.2rem; padding:0.3rem;
margin-bottom: 0.2rem;
} display: flex;
align-items: start;
.detail span { flex-direction: column;
font-family: PingFang SC; justify-content: space-around;
font-weight: 500; /* padding-bottom: 0.1rem;
font-size: 0.28rem; gap: 0.1rem; */
color: #737373;
} }
.func_btn { .detail .van-col{
width: 6.9rem; font-family: PingFang SC;
height: 0.9rem; font-weight: 500;
background: #1081E3; font-size: 0.28rem;
border-radius: 0.1rem; color: #737373;
font-family: PingFang SC; }
font-weight: 500; .detail span {
font-size: 0.3rem; font-family: PingFang SC;
color: #FFFFFF; font-weight: 500;
margin: 0 auto; font-size: 0.28rem;
border-width: 0; color: #737373;
} }
.tag { .func_btn {
display: inline-block; width: 6.9rem;
width: 0.9rem; height: 0.8rem;
height: 0.42rem; background: #1081E3;
line-height: 0.42rem; border-radius: 0.1rem;
text-align: center; font-family: PingFang SC;
background: #00B55E; font-weight: 500;
border-radius: 21px; font-size: 0.3rem;
font-weight: 500; color: #FFFFFF;
font-size: 0.28rem; margin: 0 auto;
color: #FFFFFF; border-width: 0;
} }
.tag {
/* 添加以下样式 */ display: inline-block;
.van-tabs__line { width: 0.9rem;
background-color: #1989fa; height: 0.42rem;
} line-height: 0.42rem;
text-align: center;
.blue-text { background: #00B55E;
color: #1989fa; border-radius: 21px;
font-weight: 500; font-weight: 500;
} font-size: 0.28rem;
color: #FFFFFF;
.van-list { }
background: #fff;
border-radius: 8px;
margin: 0 0.1rem; /* 添加以下样式 */
} .van-tabs__line {
background-color: #1989fa;
.van-cell { }
padding: 12px 16px;
} .blue-text {
color: #1989fa;
.van-tab__text { font-weight: 500;
font-weight: bold; }
font-size: 0.3rem;
} .van-list {
background: #fff;
.van-tab--active { border-radius: 8px;
margin: 0 0.1rem;
color: #1081E3; }
} .van-cell {
padding: 12px 16px;
.van-field__label { }
font-weight: bold;
} .van-tab__text {
font-weight: bold;
.van-field__control { font-size: 0.3rem;
color: #737373; }
}
</style> .van-tab--active {
</head>
color: #1081E3;
<body>
<div id="app"> }
<div class="wrapper">
<!-- 商户头部信息 --> .van-field__label {
<div class="header"> font-weight: bold;
<!-- <div class="level">安全等级</div> --> }
<div class="title"><img src="https://dummyimage.com/52x52" alt=""><span>威海市宝威酒店有限公司</span><span
class="tag">绿</span> .van-field__control {
</div> color: #737373;
<div class="detail"> }
<div><span>场所类型: 小餐饮</span> </div>
<div><span>自查数:15 </span> .subNavWrapper{
<span>检查数:75</span><span>隐患数:95</span><span>未整改:21: 小餐饮</span> 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>
<body>
<div id="app">
<div class="wrapper">
<!-- 商户头部信息 -->
<div class="header">
<!-- <div class="level">安全等级</div> -->
<div class="title"><img src="https://dummyimage.com/26x26" alt=""><span>威海市宝威酒店有限公司</span><span
class="tag">绿</span>
</div> </div>
<div><span>山东省威海市环翠区和谐街35-6</span> <div class="detail">
<!-- <div><span>场所类型: 小餐饮</span> </div>
<div><span>自查数:15 </span>
<span>检查数:75</span><span>隐患数:95</span><span>未整改:21: 小餐饮</span>
</div>
<div><span>山东省威海市环翠区和谐街35-6</span>
</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>
</div>
<!-- 功能 -->
<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"
style="margin-bottom: 15px;">
<van-tab title="基本信息"></van-tab>
<van-tab title="检查记录"></van-tab>
<van-tab title="隐患记录"></van-tab>
<van-tab title="整改记录"></van-tab>
</van-tabs>
</div> <!-- 内容区 -->
</div> <div v-show="activeTab === 0">
<!-- 功能 --> <!-- 表单内容 -->
<button type="info" class="func_btn">+安全检查</button> <van-cell-group inset>
<van-cell-group>
<!-- Tab栏 --> <van-field label="商家名称" v-model="formData.principal" placeholder="请输入负责人姓名" />
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px" </van-cell-group>
style="margin-bottom: 15px;">
<van-tab title="基本信息"></van-tab>
<van-tab title="检查记录"></van-tab>
<van-tab title="隐患记录"></van-tab>
<van-tab title="整改记录"></van-tab>
</van-tabs>
<!-- 内容区 -->
<div v-show="activeTab === 0">
<!-- 表单内容 -->
<van-cell-group inset>
<van-cell-group>
<van-field label="商家名称" v-model="formData.principal" placeholder="请输入负责人姓名" />
</van-cell-group>
<van-cell-group> <van-cell-group>
<van-field label="负责人" v-model="formData.phone" type="tel" placeholder="请输入联系方式" /> <van-field label="负责人" v-model="formData.phone" type="tel" placeholder="请输入联系方式" />
</van-cell-group> </van-cell-group>
<van-cell-group> <van-cell-group>
<van-field label="电话" v-model="formData.area" type="number" placeholder="请输入面积（㎡）" /> <van-field label="电话" v-model="formData.area" type="number" placeholder="请输入面积（㎡）" />
</van-cell-group> </van-cell-group>
<van-cell-group> <van-cell-group>
<van-field label="地址" v-model="formData.businessHours" placeholder="请选择时间" readonly <van-field label="地址" v-model="formData.businessHours" placeholder="请选择时间" readonly
@click="showTimePicker = true" /> @click="showTimePicker = true" />
</van-cell-group> </van-cell-group>
<van-cell-group> <van-cell-group>
<van-field label="场所类型" v-model="formData.type" placeholder="请选择场所类型" readonly clickable <van-field label="场所类型" v-model="formData.type" placeholder="请选择场所类型" readonly clickable
@click="showTypePicker = true" /> @click="showTypePicker = true" />
</van-cell-group>
<van-popup v-model:show="showTypePicker" position="bottom">
<van-picker show-toolbar :columns="typeOptions" @confirm="onConfirmType"
@cancel="showTypePicker = false" />
</van-popup>
<van-popup v-model:show="showTimePicker" position="bottom">
<van-datetime-picker type="time" @confirm="onConfirmTime" />
</van-popup>
</van-cell-group> </van-cell-group>
</div>
<van-popup v-model:show="showTypePicker" position="bottom"> <div v-show="activeTab === 1" class="subNavWrapper">
<van-picker show-toolbar :columns="typeOptions" @confirm="onConfirmType"
@cancel="showTypePicker = false" /> <!-- 隐患记录子Tab -->
</van-popup> <van-tabs v-model:active="subActiveTab" type="card">
<van-popup v-model:show="showTimePicker" position="bottom"> <van-tab title="全部"></van-tab>
<van-datetime-picker type="time" @confirm="onConfirmTime" /> <van-tab title="待审核"></van-tab>
</van-popup> <van-tab title="待整改"></van-tab>
</van-cell-group> <van-tab title="已整改"></van-tab>
</div> </van-tabs>
<!-- 隐患列表 -->
<van-list>
<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>
<div v-show="activeTab === 1">
<!-- 检查记录列表 -->
<van-list>
<van-cell v-for="item in checkList" :key="item.id" :title="`检查日期：${item.date}`"
:value="`结果：${item.result}`" value-class="blue-text" />
</van-list>
</div> </div>
</div> <script>
// 在原有Vue实例中添加
<script> new Vue({
// 在原有Vue实例中添加 el: '#app',
new Vue({ data() {
el: '#app', return {
data() { // 新增子Tab数据
return { subActiveTab: 0,
activeTab: 0, hazardList: [{
showTimePicker: false, id: 1,
// 新增以下数据 description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
showTypePicker: false, status: '待审核',
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'], date: '2024-03-15',
formData: { shop: 'XX餐饮店',
principal: '', type: 2
phone: '', },
area: '', {
businessHours: '', id: 2,
type: '', // 新增类型字段 description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
}, status: '待整改',
checkList: [ date: '2024-03-15',
{ id: 1, date: '2024-03-15', result: '合格' }, shop: 'XX餐饮店',
{ id: 2, date: '2024-03-14', result: '不合格' } type: 2
] },
} // 更多示例数据...
}, ],
methods: { activeTab: 0,
// 新增选择确认方法 showTimePicker: false,
onConfirmType(value) { // 新增以下数据
this.formData.type = value; showTypePicker: false,
this.showTypePicker = false; typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
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]
);
}
}, },
onConfirmTime(time) { methods: {
this.formData.businessHours = time; // 新增选择确认方法
this.showTimePicker = false; onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
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>
</script> </body>
</body>
</html> </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