You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
3.6 KiB
112 lines
3.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta http-equiv="Expires" content="0">
|
|
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
|
|
<title>蒙自中医专家介绍</title>
|
|
<style>
|
|
.back-top {
|
|
position: fixed;
|
|
width: 40px;
|
|
height: 40px;
|
|
color: var(--color-primary);
|
|
background-color: rgba(255, 255, 255, 0.66);
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.14);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 100;
|
|
bottom: 40px;
|
|
right: 40px;
|
|
}
|
|
|
|
.back-top:hover {
|
|
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
|
|
<h3 style="padding: 2px 10px;color:#303133;">专家介绍</h3>
|
|
|
|
<div style="color:#909399;font-size:13px; margin: 2px 0 20px 10px;">蒙自中医医院</div>
|
|
|
|
<div v-for="(item, i) in doctors" :key="i">
|
|
<img :src="'/wx/images/doctors/'+ item.image"
|
|
style="margin: 10px; width: calc(100% - 20px);box-shadow: 3px 3px 12px rgba(0,0,0,0.15);box-sizing: border-box;">
|
|
</div>
|
|
|
|
<div class='back-top' v-show="show" @click="backTop()">
|
|
<svg t="1577433514892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
p-id="1512" width="20" height="20">
|
|
<path
|
|
d="M495.36 268.448l-296.672 384a31.936 31.936 0 0 0 25.28 51.552l593.504 0a32 32 0 0 0 25.28000001-51.552l-296.70400001-384a32 32 0 0 0-50.656 0"
|
|
p-id="1513" fill="var(--color-primary)"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
show: false,
|
|
doctors: [
|
|
{ image: '1赵鹏.png' },
|
|
{ image: '2赵秀梅.png' },
|
|
{ image: '3高林荣.png' },
|
|
{ image: '4关安平.png' },
|
|
{ image: '5黄雪梅.png' },
|
|
{ image: '6何朝霞.png' },
|
|
{ image: '7李琼.png' },
|
|
{ image: '8汤国华.png' },
|
|
{ image: '9殷守文.png' },
|
|
{ image: '10姚纪萍.png' },
|
|
{ image: '11王定本.png' },
|
|
{ image: '12张庆新.png' },
|
|
{ image: '13龙子成.png' },
|
|
{ image: '14吴清平.png' },
|
|
{ image: '15毛桂仙.png' },
|
|
{ image: '16邵琪.png' },
|
|
{ image: '17蔡芳.png' },
|
|
{ image: '18刘仲书.png' },
|
|
{ image: '19马舒迪.png' },
|
|
{ image: '20米石安.png' },
|
|
{ image: '21李宝杰.png' },
|
|
{ image: '黄晨程.png' },
|
|
{ image: '刘洋.png' },
|
|
{ image: '谢梦蝶.png' },
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
backTop() {
|
|
document.body.scrollTop = 0
|
|
document.documentElement.scrollTop = 0
|
|
this.$emit('backTop')
|
|
},
|
|
handleScroll() { // 计算滚动条
|
|
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
|
this.show = scrollTop > 200
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('scroll', this.handleScroll, true)
|
|
},
|
|
unmounted() {
|
|
window.removeEventListener('scroll', this.handleScroll, true)
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
|
|
</html> |