xuechunyuan
3 years ago
parent
a31d00fbdd
commit
d3b34e6af8
8 changed files with 264 additions and 42 deletions
@ -1,17 +1,54 @@ |
||||
<!DOCTYPE html> |
||||
<html lang=""> |
||||
<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"> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
</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"> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title> |
||||
<%= htmlWebpackPlugin.options.title %> |
||||
</title> |
||||
<style> |
||||
* { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
html, |
||||
body { |
||||
height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
<script src="https://isdapp.shandong.gov.cn/jmopen/jssdk/index.js"></script> |
||||
<script> |
||||
(function (doc, win) { |
||||
var docEl = doc.documentElement, |
||||
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', |
||||
recalc = function () { |
||||
var clientWidth = docEl.clientWidth; |
||||
if (!clientWidth) return; |
||||
if (clientWidth >= 750) { |
||||
docEl.style.fontSize = '100px'; //1rem = 100px |
||||
} else { |
||||
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'; |
||||
} |
||||
}; |
||||
if (!doc.addEventListener) return; |
||||
win.addEventListener(resizeEvt, recalc, false); |
||||
doc.addEventListener('DOMContentLoaded', recalc, false); |
||||
})(document, window); |
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. |
||||
Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,32 +1,17 @@ |
||||
<template> |
||||
<div id="app"> |
||||
<nav> |
||||
<router-link to="/">Home</router-link> | |
||||
<router-link to="/about">About</router-link> |
||||
</nav> |
||||
<router-view /> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
#app { |
||||
width:100%; |
||||
height:100%; |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-align: center; |
||||
color: #2c3e50; |
||||
} |
||||
|
||||
nav { |
||||
padding: 30px; |
||||
|
||||
a { |
||||
font-weight: bold; |
||||
color: #2c3e50; |
||||
|
||||
&.router-link-exact-active { |
||||
color: #42b983; |
||||
} |
||||
} |
||||
font-size: 0.14rem; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,104 @@ |
||||
<template> |
||||
<div class="guidance"> |
||||
<div class="guide_title">海慈医院体检预约须知</div> |
||||
<div class="guide_contant" ref="scrollView" id="scroll-view" @scroll="scroll"> |
||||
<p>尊敬的驾驶员：</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
<p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p> |
||||
</div> |
||||
<div class="guide_btn"> |
||||
<van-button size="small" @click="doCancel">取消</van-button> |
||||
<van-button @click="doRead" type="info" size="small" :disabled="this.isFlag ? false : true">已阅读</van-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Guidance", |
||||
props: { |
||||
msg: String, |
||||
}, |
||||
data() { |
||||
return { |
||||
isFlag: false,//是否阅读到底部 |
||||
} |
||||
}, |
||||
methods: { |
||||
//取消 |
||||
doCancel() { |
||||
this.$emit('doCancelGuide',''); |
||||
}, |
||||
//已阅读 |
||||
doRead() { |
||||
if (!this.isFlag) { |
||||
//未阅读完整 |
||||
lightAppJssdk.notification.alert({ |
||||
message: "还有内容没有阅读完，请滑动屏幕阅读完全", |
||||
title: "",//可传空 |
||||
buttonName: "确定", |
||||
success: function (data) { |
||||
//onSuccess将在点击button之后回调 |
||||
/*回调*/ |
||||
}, |
||||
fail: function (data) { //错误返回 |
||||
} |
||||
}); |
||||
} |
||||
else { |
||||
//阅读完整 |
||||
this.$router.push({ name: '', params: {} }) |
||||
} |
||||
}, |
||||
//监听阅读进度 |
||||
scroll(e) { |
||||
if (this.isFlag) { |
||||
return; |
||||
} |
||||
const { scrollTop, clientHeight, scrollHeight } = e.target; |
||||
if (scrollTop + clientHeight === scrollHeight) { |
||||
this.isFlag = true; |
||||
console.log('阅读完成') |
||||
} |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
<style scoped lang="scss"> |
||||
.guidance { |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: #fff; |
||||
|
||||
.guide_title { |
||||
font-size: 0.22rem; |
||||
text-align: center; |
||||
padding: 0.15rem 0; |
||||
} |
||||
|
||||
.guide_contant { |
||||
height: 5rem; |
||||
line-height: 0.22rem; |
||||
overflow-y: auto; |
||||
margin: 0.1rem 0; |
||||
padding: 0 0.3rem; |
||||
} |
||||
|
||||
.guide_btn { |
||||
text-align: center; |
||||
margin-top: 0.15rem; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,18 +1,75 @@ |
||||
<template> |
||||
<div class="home"> |
||||
<img alt="Vue logo" src="../assets/logo.png" /> |
||||
<HelloWorld msg="Welcome to Your Vue.js App" /> |
||||
<div class="act_title">医院选择</div> |
||||
<div class="act_shoose"> |
||||
<van-button @click="doGuidance" block>海慈医院</van-button> |
||||
<van-button @click="doGuidance" block>即墨人民医院</van-button> |
||||
<van-button @click="doGuidance" block>平度人民医院</van-button> |
||||
<van-button @click="doGuidance" block>胶州医院</van-button> |
||||
<van-button @click="doGuidance" block>莱西市立医院</van-button> |
||||
</div> |
||||
<div class="act_box"> |
||||
<van-button type="info" block>我的预约</van-button> |
||||
</div> |
||||
<!-- 阅读须知 --> |
||||
<GuidanceVue @doCancelGuide="doCancelGuide" v-if="guideShow"></GuidanceVue> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// @ is an alias to /src |
||||
import HelloWorld from "@/components/HelloWorld.vue"; |
||||
|
||||
import GuidanceVue from '@/components/Guidance.vue'; |
||||
export default { |
||||
name: "HomeView", |
||||
components: { |
||||
HelloWorld, |
||||
GuidanceVue, |
||||
}, |
||||
data() { |
||||
return { |
||||
guideShow: false |
||||
} |
||||
}, |
||||
methods: { |
||||
testAlert() { |
||||
lightAppJssdk.notification.alert({ |
||||
message: "这是一个弹窗", |
||||
title: "提示",//可传空 |
||||
buttonName: "收到", |
||||
success: function (data) { |
||||
//onSuccess将在点击button之后回调 |
||||
/*回调*/ |
||||
}, |
||||
fail: function (data) { //错误返回 |
||||
} |
||||
}); |
||||
}, |
||||
//取消阅读 |
||||
doCancelGuide() { |
||||
this.guideShow = false; |
||||
}, |
||||
//阅读须知 |
||||
doGuidance() { |
||||
this.guideShow = true; |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.home{ |
||||
.act_title{ |
||||
font-size: 0.22rem; |
||||
text-align: center; |
||||
padding:0.15rem 0; |
||||
} |
||||
.act_shoose{ |
||||
margin: 0.1rem 0; |
||||
padding: 0 0.3rem; |
||||
.van-button{ |
||||
margin-bottom: 0.12rem; |
||||
} |
||||
} |
||||
.act_box{ |
||||
width: 2rem; |
||||
text-align: center; |
||||
margin:0.15rem auto 0; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -1,4 +1,5 @@ |
||||
const { defineConfig } = require("@vue/cli-service"); |
||||
module.exports = defineConfig({ |
||||
lintOnSave: false, |
||||
transpileDependencies: true, |
||||
}); |
||||
|
||||
Loading…
Reference in new issue