Skip to content

G
GaoQuYingJiH5-ASD
Commit 12c49257 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

html , css ,js

parent 3eb62ec1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 512 additions and 1200 deletions
src/_check_list_detail.html deleted 100644 → 0
View file @ 3eb62ec1
This diff is collapsed.
src/_checkrecord.css 0 → 100644
View file @ 12c49257
html,
body {
letter-spacing: .01rem;
background: #F5F6FA;
}
.wrapper {}
.header {
background-color: #fff;
}
.header .title {
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
background: #F5F6FA;
border-radius: 0.01rem;
margin: 0 auto;
padding: 0.2rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
}
.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;
font-size: 0.28rem;
color: #737373;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #F5F6FA;
border-radius: 8px;
margin: 0.2rem 0.2rem;
}
.van-list .van-cell {
margin-bottom: .2rem;
}
.van-tab {
color: #000;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
/* color: #000; */
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
\ No newline at end of file
src/_checkrecord.html
View file @ 12c49257
......@@ -7,102 +7,6 @@
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>
html,
body {
letter-spacing: .01rem;
background: #F5F6FA;
}
.wrapper {
}
.header {
background-color: #fff;
}
.header .title {
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
background: #F5F6FA;
border-radius: 0.01rem;
margin: 0 auto;
padding: 0.2rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
}
.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;
font-size: 0.28rem;
color: #737373;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #F5F6FA;
border-radius: 8px;
margin: 0.2rem 0.2rem;
}
.van-list .van-cell{
margin-bottom: .2rem;
}
.van-tab {
color: #000;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
/* color: #000; */
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
</style>
</head>
<div id="app">
<div class="wrapper">
......@@ -137,7 +41,7 @@
</van-tabs>
</div>
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id">
<div style="width: 100%;">
......@@ -151,11 +55,10 @@
font-weight: bold;
font-family: PingFang SC;
">{{ item.description }}</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
<span
style="color: #737373; font-size: 0.28rem;">检查时间：{{ item.date }}</span>
<span style="color: #737373; font-size: 0.28rem;">检查时间：{{ item.date }}</span>
</div>
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: start; gap: .4rem; align-items: center;">
......@@ -166,94 +69,7 @@
</div>
</van-cell>
</van-list>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
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,
// 新增以下数据
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]
);
}
},
methods: {
// 新增选择确认方法
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>
</body>
</body>
</html>
\ No newline at end of file
src/_checkrecord.js 0 → 100644
View file @ 12c49257
// 在原有Vue实例中添加
new Vue({
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,
// 新增以下数据
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]
);
}
},
methods: {
// 新增选择确认方法
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);
// 这里添加跳转逻辑
}
}
});
\ No newline at end of file
src/_shanghu_detail.css 0 → 100644
View file @ 12c49257
html,
body {
background-color: #fff;
}
.wrapper {
/* padding: 0.2rem; */
}
/* 添加以下样式 */
.van-cell {
padding: 12px 16px;
}
.van-field__label {
font-weight: bold;
color: #000;
font-size: .28rem;
}
.van-field__control {
color: #737373;
}
.container {
text-align: center;
}
.qr-card {
margin-bottom: 10px;
}
.save-btn {
background: #1890ff;
color: #fff;
border: none;
padding: 7px 20px;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
margin-bottom: .4rem;
}
\ No newline at end of file
src/_shanghu_detail.html
View file @ 12c49257
......@@ -7,51 +7,9 @@
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>
html, body{
background-color: #fff;
}
.wrapper {
/* padding: 0.2rem; */
}
/* 添加以下样式 */
.van-cell {
padding: 12px 16px;
}
.van-field__label {
font-weight: bold;
color: #000;
font-size: .28rem;
}
.van-field__control {
color: #737373;
}
</style>
<style>
.container {
text-align: center;
}
.qr-card {
margin-bottom: 10px;
}
.save-btn {
background: #1890ff;
color: #fff;
border: none;
padding: 7px 20px;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
margin-bottom: .4rem;
}
</style>
</head>
<div id="app">
<div class="wrapper">
<!-- 表单内容 -->
<van-cell-group inset>
<van-cell-group>
......@@ -92,132 +50,6 @@
</div>
<button class="save-btn" onclick="saveCanvas()">保存二维码</button>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
sjName1:'威海市宝威酒店有限公司',
sjName2:'XXX',
sjName3:'0631-522221212',
sjName4:'威海市XXXXXXXXX',
sjName5:'小餐饮',
},
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
}
},
computed: {
},
methods: {
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
});
</script>
<script>
const QR_IMAGE_URL = 'http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg';
let canvasReady = false;
// 记录已加载的图片数量
let loadedImages = 0;
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');
// 加载二维码图片
const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域问题
img.src = '../image/code/erweima.png'; // QR_IMAGE_URL;
const img4erweima = new Image();
img4erweima.crossOrigin = "Anonymous"; // 处理跨域问题
img4erweima.src = QR_IMAGE_URL; // QR_IMAGE_URL;
img.onload = function () {
loadedImages++;
drawImages();
};
img4erweima.onload = function () {
loadedImages++;
drawImages();
};
function drawImages() {
if (loadedImages === 2) {
// 画布的宽度和高度
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// 图片的原始宽度和高度
const imgWidth = img.width;
const imgHeight = img.height;
// 计算宽度和高度的缩放比例
const scaleX = canvasWidth / imgWidth;
const scaleY = canvasHeight / imgHeight;
// 取较小的缩放比例作为最终的缩放比例
const scale = Math.min(scaleX, scaleY);
// 计算缩放后的图片宽度和高度
const scaledWidth = imgWidth * scale;
const scaledHeight = imgHeight * scale;
// 计算图片在画布上的绘制位置，使其居中显示
const x = (canvasWidth - scaledWidth) / 2;
const y = (canvasHeight - scaledHeight) / 2;
// 绘制图片到 canvas 上
ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
// 绘制前景图标
const fgIconSize = 150; // 假设前景图标显示的尺寸
const fgX = (canvasWidth - fgIconSize) / 2;
const fgY = (canvasHeight - fgIconSize) / 2;
// 绘制二维码
ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize);
canvasReady = true;
}
}
function saveCanvas() {
if (!canvasReady) return;
const canvas = document.getElementById('mainCanvas');
const dataURL = canvas.toDataURL('image/png');
console.log(dataURL, '图片下载')
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function(data) {
alert(JSON.stringify(data));
},
fail: function(data) {
alert(data);
}
});
}
</script>
</body>
</html>
\ No newline at end of file
src/_shanghu_detail.js 0 → 100644
View file @ 12c49257
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
sjName1: '威海市宝威酒店有限公司',
sjName2: 'XXX',
sjName3: '0631-522221212',
sjName4: '威海市XXXXXXXXX',
sjName5: '小餐饮',
},
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
}
},
computed: {},
methods: {
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
}); <
/script> <
script >
const QR_IMAGE_URL = 'http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg';
let canvasReady = false;
// 记录已加载的图片数量
let loadedImages = 0;
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');
// 加载二维码图片
const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域问题
img.src = '../image/code/erweima.png'; // QR_IMAGE_URL;
const img4erweima = new Image();
img4erweima.crossOrigin = "Anonymous"; // 处理跨域问题
img4erweima.src = QR_IMAGE_URL; // QR_IMAGE_URL;
img.onload = function() {
loadedImages++;
drawImages();
};
img4erweima.onload = function() {
loadedImages++;
drawImages();
};
function drawImages() {
if (loadedImages === 2) {
// 画布的宽度和高度
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// 图片的原始宽度和高度
const imgWidth = img.width;
const imgHeight = img.height;
// 计算宽度和高度的缩放比例
const scaleX = canvasWidth / imgWidth;
const scaleY = canvasHeight / imgHeight;
// 取较小的缩放比例作为最终的缩放比例
const scale = Math.min(scaleX, scaleY);
// 计算缩放后的图片宽度和高度
const scaledWidth = imgWidth * scale;
const scaledHeight = imgHeight * scale;
// 计算图片在画布上的绘制位置，使其居中显示
const x = (canvasWidth - scaledWidth) / 2;
const y = (canvasHeight - scaledHeight) / 2;
// 绘制图片到 canvas 上
ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
// 绘制前景图标
const fgIconSize = 150; // 假设前景图标显示的尺寸
const fgX = (canvasWidth - fgIconSize) / 2;
const fgY = (canvasHeight - fgIconSize) / 2;
// 绘制二维码
ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize);
canvasReady = true;
}
}
function saveCanvas() {
if (!canvasReady) return;
const canvas = document.getElementById('mainCanvas');
const dataURL = canvas.toDataURL('image/png');
console.log(dataURL, '图片下载')
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function(data) {
alert(JSON.stringify(data));
},
fail: function(data) {
alert(data);
}
});
}
\ No newline at end of file
src/_yh-check.css 0 → 100644
View file @ 12c49257
html,
body {
background: #F5F6FA;
/* background: #fff; */
}
.wrapper {
/* padding: 0.2rem; */
}
/* 条件查询样式 */
.header {
background-color: #fff;
}
.header .van-search__label {
background-color: #fff;
padding-right: .24rem;
}
.header .van-search__content {
padding-left: 0;
}
.header .van-search__content .van-cell {
padding-left: 0.24rem;
}
.van-tabs__nav {
padding-right: .2rem;
}
.list-item {
margin-bottom: .2rem;
}
.tag {
display: inline-block;
width: 0.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
background: #00B55E;
border-radius: 21px;
font-weight: 500;
font-size: 0.28rem;
color: #FFFFFF;
}
.van-tab {
color: #000;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
/* background: #fff; */
border-radius: 8px;
margin: 0 0.25rem;
}
.van-cell {
padding: 12px 16px;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
\ No newline at end of file
src/_yh-check.html
View file @ 12c49257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
......@@ -8,103 +7,6 @@
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>
html,body{
background: #F5F6FA;
/* background: #fff; */
}
.wrapper {
/* padding: 0.2rem; */
}
/* 条件查询样式 */
.header{
background-color: #fff;
}
.header .van-search__label{
background-color: #fff;
padding-right: .24rem;
}
.header .van-search__content{
padding-left: 0;
}
.header .van-search__content .van-cell{
padding-left: 0.24rem;
}
.van-tabs__nav{
padding-right: .2rem;
}
.list-item{
margin-bottom: .2rem;
}
.tag {
display: inline-block;
width: 0.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
background: #00B55E;
border-radius: 21px;
font-weight: 500;
font-size: 0.28rem;
color: #FFFFFF;
}
.van-tab {
color: #000;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
/* background: #fff; */
border-radius: 8px;
margin: 0 0.25rem;
}
.van-cell {
padding: 12px 16px;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
</style>
</head>
<body>
......@@ -166,74 +68,5 @@
</van-cell>
</van-list>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
shanghuName: '',
// 新增子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,
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
onSearch(){
console.log('xxxx')
},
// 新增选择确认方法
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>
</body>
</html>
\ No newline at end of file
src/_yh-check.js 0 → 100644
View file @ 12c49257
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
shanghuName: '',
// 新增子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,
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
onSearch() {
console.log('xxxx')
},
// 新增选择确认方法
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);
// 这里添加跳转逻辑
}
}
});
\ 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