Skip to content

G
GaoQuYingJiH5-ASD
Commit 9cf2006f authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：安全常识详情

parent 64375ade
Hide whitespace changes
Inline Side-by-side
Showing with 562 additions and 0 deletions
src/_anquan_changshi-detail-text.css 0 → 100644
View file @ 9cf2006f
/* 全局基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f5f5f5;
font-family: 'PingFang SC', sans-serif;
}
/* 视频播放区域 */
.video-container {
width: 100%;
height: 4rem;
/* 固定高度或根据比例计算 */
background: #000;
margin-bottom: 0.2rem;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
/* 视频填充方式 */
}
/* 标题与日期区域 */
.info-section {
padding: 0 0.3rem;
margin-bottom: 0.3rem;
}
.title-wrapper {
display: flex;
align-items: center;
gap: 0.15rem;
margin-bottom: 0.15rem;
width: 6.92rem;
height: 1.96rem;
background: #EAF5FF;
border-radius: 0.1rem;
padding: .2rem;
border: .01rem solid #7DC3FF;
}
.title-icon {
width: 0.4rem;
height: 0.4rem;
}
.video-title {
font-size: 0.32rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.video-date {
font-size: 0.28rem;
color: #737373;
}
/* 两列图文列表 */
.grid-list {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
padding: 0 0.3rem;
}
.grid-item {
flex: 0 0 calc(50% - 0.1rem);
/* 每行两列，间距0.2rem */
background: #fff;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.grid-item-image {
width: 100%;
height: 2rem;
object-fit: cover;
}
.grid-item-text {
padding: 0.15rem;
font-size: 0.28rem;
color: #333;
line-height: 1.4;
/* 单行溢出省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 新增：附件区域样式 */
.attachment-section {
padding: 0 0.3rem 0.3rem;
background: #fff;
margin-bottom: 0.2rem;
}
.attachment-title {
font-size: 0.3rem;
color: #333;
font-weight: 500;
margin-bottom: 0.15rem;
}
.attachment-link {
display: flex;
align-items: center;
gap: 0.1rem;
padding: 0.15rem;
background: #f8f9fa;
border-radius: 6px;
color: #1081E3;
font-size: 0.28rem;
text-decoration: none;
}
.attachment-link:hover {
background: #f0f2f5;
}
\ No newline at end of file
src/_anquan_changshi-detail-text.html 0 → 100644
View file @ 9cf2006f
<!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, viewport-fit:cover">
<title>安全常识</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 标题与日期 -->
<div class="info-section">
<div class="title-wrapper">
<h3 class="video-title">2024年安全生产常识培训视频：危险化学品存储规范</h3>
</div>
<p class="video-date">日期：2024-05-20</p>
</div>
<!-- 新增：附件链接区域 -->
<div class="attachment-section">
<h4 class="attachment-title">相关附件</h4>
<div class="attachment-list">
<!-- 可通过v-for动态渲染多个附件 -->
<div class="attachment-link" @click="previewFile">
<van-icon name="paperclip" size="0.32rem" />
<span>危险化学品存储规范.pdf</span>
</div>
</div>
</div>
<!-- 两列图文列表 -->
<div class="grid-list">
收快递费了时代峰峻
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_anquan_changshi-detail-text.js 0 → 100644
View file @ 9cf2006f
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
merName:'',
userType: gemhoUtil.getCookie('userType'),
shanghuName: '',
// 新增子Tab数据
hazardList: [
// 更多示例数据...
],
activeTab: '',
status: '',
merId: '',
showSearch: false, // 控制搜索框的显示和隐藏
// 整改状态 0：待整改 1：已整改 2：待审核 3：整改逾期
tabList: [
{ name: '', title: '全部', msgNum: 0, },
{ name: '2', title: '待审核', msgNum: 0, },
{ name: '0', title: '待整改', msgNum: 0, },
{ name: '1', title: '已整改', msgNum: 0, },
{ name: '3', title: '整改逾期', msgNum: 0, },
],
loading: false,
finished: false,
page: 0,
size: 6,
total: 0,
}
},
created() {
let params = gemhoUtil.getUrlParams()
console.log(params);
this.merId = params.merId
},
mounted() {
},
methods: {
previewFile(){
location.href = "http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf"
},
onSearch() {
console.log('xxxx', this.merName)
this.getList()
},
reset() {
this.page = 0
this.size = 6
this.total = 0
this.hazardList = []
},
getList(){
// 这里添加获取数据的逻辑
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['page']['id'],
interfacePublicKey: API_KEY_MAP['page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['page']['privateKey'],
reqParams: {
sign: 3,
// merId: this.merId ? this.merId : '',
merName: this.shanghuName,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
console.log(result, 'result')
this.loading = false; // 加载状态结束
this.hazardList.push(...result.rows);
this.total = result.total
if (this.page * this.size >= this.total) {
this.finished = true; // 下滑不在刷新数据
}
}
this.loading = false
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
}
)
}, 0)
},
tabChange(title) {
console.log('tab 切换', title)
this.reset()
this.getList()
},
init() {
this.getList()
},
onSearch() {
this.reset()
this.getList()
},
// 新增选择确认方法
viewDetail(item, type) {
let param = {
id: item.id,
pageName: '_anquan_changshi',
}
let url = gemhoUtil.setParameter('_anquan_changshi-detail.html', param)
console.log(url)
gemhoUtil.navigatePage(url, '跳转中...')
},
}
});
})
\ No newline at end of file
src/_anquan_changshi-detail-video.css 0 → 100644
View file @ 9cf2006f
/* 全局基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f5f5f5; font-family: 'PingFang SC', sans-serif; }
/* 视频播放区域 */
.video-container {
width: 100%;
height: 4rem; /* 固定高度或根据比例计算 */
background: #000;
margin-bottom: 0.2rem;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* 视频填充方式 */
}
/* 标题与日期区域 */
.info-section {
padding: 0 0.3rem;
margin-bottom: 0.3rem;
}
.title-wrapper {
display: flex;
align-items: center;
gap: 0.15rem;
margin-bottom: 0.15rem;
}
.title-icon {
width: 0.4rem;
height: 0.4rem;
}
.video-title {
font-size: 0.32rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.video-date {
font-size: 0.28rem;
color: #737373;
}
/* 两列图文列表 */
.grid-list {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
padding: 0 0.3rem;
}
.grid-item {
flex: 0 0 calc(50% - 0.1rem); /* 每行两列，间距0.2rem */
background: #fff;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.grid-item-image {
width: 100%;
height: 2rem;
object-fit: cover;
}
.grid-item-text {
padding: 0.15rem;
font-size: 0.28rem;
color: #333;
line-height: 1.4;
/* 单行溢出省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
\ No newline at end of file
src/_anquan_changshi-detail-video.html 0 → 100644
View file @ 9cf2006f
<!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, viewport-fit:cover">
<title>安全常识</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 视频播放区域 -->
<div class="video-container">
<video controls poster="https://dummyimage.com/750x400">
<source src="https://example.com/video.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
</div>
<!-- 标题与日期 -->
<div class="info-section">
<div class="title-wrapper">
<img class="title-icon" src="https://dummyimage.com/37x32">
<h3 class="video-title">2024年安全生产常识培训视频：危险化学品存储规范</h3>
</div>
<p class="video-date">日期：2024-05-20</p>
</div>
<!-- 两列图文列表 -->
<div class="grid-list">
<div class="grid-item" v-for="item in 11" :key="item.id">
<img class="grid-item-image" src="https://dummyimage.com/340x206" alt="相关内容封面">
<p class="grid-item-text">{{ item }}</p>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_anquan_changshi-detail-video.js 0 → 100644
View file @ 9cf2006f
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
merName:'',
userType: gemhoUtil.getCookie('userType'),
shanghuName: '',
// 新增子Tab数据
hazardList: [
// 更多示例数据...
],
activeTab: '',
status: '',
merId: '',
showSearch: false, // 控制搜索框的显示和隐藏
// 整改状态 0：待整改 1：已整改 2：待审核 3：整改逾期
tabList: [
{ name: '', title: '全部', msgNum: 0, },
{ name: '2', title: '待审核', msgNum: 0, },
{ name: '0', title: '待整改', msgNum: 0, },
{ name: '1', title: '已整改', msgNum: 0, },
{ name: '3', title: '整改逾期', msgNum: 0, },
],
loading: false,
finished: false,
page: 0,
size: 6,
total: 0,
}
},
created() {
let params = gemhoUtil.getUrlParams()
console.log(params);
this.merId = params.merId
},
mounted() {
},
methods: {
onSearch() {
console.log('xxxx', this.merName)
this.getList()
},
reset() {
this.page = 0
this.size = 6
this.total = 0
this.hazardList = []
},
getList(){
// 这里添加获取数据的逻辑
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['page']['id'],
interfacePublicKey: API_KEY_MAP['page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['page']['privateKey'],
reqParams: {
sign: 3,
// merId: this.merId ? this.merId : '',
merName: this.shanghuName,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
console.log(result, 'result')
this.loading = false; // 加载状态结束
this.hazardList.push(...result.rows);
this.total = result.total
if (this.page * this.size >= this.total) {
this.finished = true; // 下滑不在刷新数据
}
}
this.loading = false
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
}
)
}, 0)
},
tabChange(title) {
console.log('tab 切换', title)
this.reset()
this.getList()
},
init() {
this.getList()
},
onSearch() {
this.reset()
this.getList()
},
// 新增选择确认方法
viewDetail(item, type) {
let param = {
id: item.id,
pageName: '_anquan_changshi',
}
let url = gemhoUtil.setParameter('_anquan_changshi-detail.html', param)
console.log(url)
gemhoUtil.navigatePage(url, '跳转中...')
},
}
});
})
\ 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