256 lines
7.7 KiB
HTML
256 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
|
|
<title>Title</title>
|
|
<!-- 引入样式文件 -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">
|
|
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.2.0/weui.min.css">
|
|
|
|
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
|
|
<script src="/assets/platform/plugins/moment/moment.min.js"></script>
|
|
|
|
</head>
|
|
<style>
|
|
html, body {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
max-width: 600px;
|
|
background-color: white;
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
display: none
|
|
}
|
|
|
|
[v-clock] {
|
|
display: none
|
|
}
|
|
|
|
html, body {
|
|
font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
.page-v {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.detail-v {
|
|
margin-top: 15px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.p15 {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.njuColor {
|
|
color: rgb(106, 0, 95);
|
|
}
|
|
|
|
.title-v {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.form-v {
|
|
/*margin-top: 20px;*/
|
|
}
|
|
|
|
.van-doc-demo-block__title {
|
|
margin: 0;
|
|
padding: 0 16px;
|
|
color: rgba(69, 90, 100, 0.6);
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.goods-card {
|
|
margin: 0;
|
|
background-color: white;
|
|
}
|
|
|
|
.delete-button {
|
|
height: 100%;
|
|
}
|
|
|
|
.van-swipe-cell__wrapper {
|
|
border: none;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div v-clock id="app">
|
|
<div>
|
|
<van-swipe v-if="boxData.fileList.length>0" class="my-swipe" :autoplay="3000" indicator-color="white">
|
|
<van-swipe-item v-for="url in boxData.fileList">
|
|
<van-image
|
|
width="100%"
|
|
height="200px"
|
|
fit="cover"
|
|
:src="url"
|
|
></van-image>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
<van-image
|
|
v-else
|
|
width="100%"
|
|
height="200px"
|
|
fit="cover"
|
|
src="***"
|
|
>
|
|
<template v-slot:error>封面图片</template>
|
|
</van-image>
|
|
</div>
|
|
<div v-if="active==0" class="page-v">
|
|
<div class="detail-v">
|
|
<div class="title-v p15">
|
|
<h3 :style="'color: '+boxData.hdcolor">活动介绍</h3>
|
|
<div class="van-hairline--top"></div>
|
|
<br/>
|
|
</div>
|
|
<div class="p15">
|
|
<div v-html="boxData.hdjs"></div>
|
|
</div>
|
|
<div class="title-v p15">
|
|
<br/>
|
|
<h3 :style="'color: '+boxData.hdcolor">参加人员</h3>
|
|
<div class="van-hairline--top"></div>
|
|
<br/>
|
|
</div>
|
|
<div class="p15">
|
|
<div v-html="boxData.hdcjry"></div>
|
|
</div>
|
|
<div class="title-v p15">
|
|
<br/>
|
|
<h3 :style="'color: '+boxData.hdcolor">奖励方式</h3>
|
|
<div class="van-hairline--top"></div>
|
|
<br/>
|
|
</div>
|
|
<div class="p15">
|
|
<div v-html="boxData.hdjlfs"></div>
|
|
</div>
|
|
<div class="title-v p15">
|
|
<br/>
|
|
<h3 :style="'color: '+boxData.hdcolor">活动内容</h3>
|
|
<div class="van-hairline--top"></div>
|
|
<br/>
|
|
</div>
|
|
<div class="p15">
|
|
<div v-html="boxData.hdnr"></div>
|
|
</div>
|
|
<div class="title-v p15">
|
|
<br/>
|
|
<h3 :style="'color: '+boxData.hdcolor">活动联系人</h3>
|
|
<div class="van-hairline--top"></div>
|
|
<br/>
|
|
</div>
|
|
<div class="p15" style="line-height:24pt;">
|
|
<div v-html="boxData.hdlxr"></div>
|
|
</div>
|
|
<div class="title-v p15" v-if="!isNull(boxData.hdother.replace(/<.*?>/g,''))">
|
|
<br/>
|
|
<h3 :style="'color: '+boxData.hdcolor">其他</h3>
|
|
<div class="van-hairline--top"></div>
|
|
<br/>
|
|
</div>
|
|
<div class="p15" style="line-height:24pt;" v-if="!isNull(boxData.hdother.replace(/<.*?>/g,''))">
|
|
<div v-html="boxData.hdother"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<van-tabbar
|
|
style="max-width: 600px;position: fixed;left: 0;bottom: 0;right: 0;margin: auto"
|
|
v-model="active"
|
|
:active-color="boxData.hdcolor"
|
|
inactive-color="#000"
|
|
>
|
|
<van-tabbar-item icon="label-o">介绍</van-tabbar-item>
|
|
</van-tabbar>
|
|
<van-number-keyboard safe-area-inset-bottom/>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
|
|
<script>
|
|
|
|
|
|
var xhrOnProgress = function (fun) {
|
|
xhrOnProgress.onprogress = fun; //绑定监听
|
|
//使用闭包实现监听绑
|
|
return function () {
|
|
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
|
|
var xhr = $.ajaxSettings.xhr();
|
|
//判断监听函数是否为函数
|
|
if (typeof xhrOnProgress.onprogress !== 'function')
|
|
return xhr;
|
|
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
|
|
if (xhrOnProgress.onprogress && xhr.upload) {
|
|
xhr.upload.onprogress = xhrOnProgress.onprogress;
|
|
}
|
|
return xhr;
|
|
}
|
|
}
|
|
|
|
function getSuffix(filename) {
|
|
return /\.[^\.]+$/.exec(filename)
|
|
}
|
|
|
|
var vue = new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
fd: [],
|
|
boxData: {},
|
|
active: 0,
|
|
isNull: function (val) {
|
|
if (val == null || val == undefined || val == '') {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
imgtype: ['gif', 'jpg', 'png', 'jpeg'],
|
|
audiotype: ['mp3', 'wma', 'flac', 'wav', 'm4a', 'amr', 'au'],
|
|
doctype: ['doc', 'docx', 'txt'],
|
|
videotype: ['flv', 'swf', 'mkv', 'avi', 'rm', 'rmvb', 'wmv', 'mp4', 'mov', 'mpg', 'mpeg', 'quicktime'],
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
created: function () {
|
|
var self = this
|
|
if (window.innerWidth > 800) {
|
|
self.$notify({type: 'warning', message: '当前窗口宽度过大！部分区域显示会出现大小偏差'});
|
|
}
|
|
var wmhd_boxdata = localStorage.getItem("wmhd_boxdata")
|
|
if (wmhd_boxdata != undefined && wmhd_boxdata != null) {
|
|
this.boxData = JSON.parse(wmhd_boxdata)
|
|
localStorage.removeItem("wmhd_boxdata")
|
|
} else {
|
|
this.boxData = {
|
|
hdjs: '',
|
|
hdcjry: '',
|
|
hdjlfs: '',
|
|
hdnr: '',
|
|
hdlxr: '',
|
|
hdother: '',
|
|
hdcolor: '#6A005F',
|
|
fileList: [],
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |