preliminary/src/components/Department.vue

<template>
    <div class="department">
        <div class="departmentView">
            <div class="content">
                <div class="list" @click="goStart">
                    <div class="top">
                        <p>挂号科室：急诊科 <img src="../images/right.png" alt=""></p>
                    </div>
                    <div class="main">
                        <p>预约时间：2019-8-18 14:00</p>
                        <p>病历号：1234567</p>
                        <p>挂号信息：1234567</p>
                    </div>
                </div>
                <div class="list">
                    <div class="top">
                        <p>挂号科室：急诊科 <img src="../images/right.png" alt=""></p>
                    </div>
                    <div class="main">
                        <p>预约时间：2019-8-18 14:00</p>
                        <p>病历号：1234567</p>
                        <p>挂号信息：1234567</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import {setScroll} from '@utils/tools.js';
  import BScroll from 'better-scroll';
    export default {
        name: "Department",
        data(){
            return {
                scroll:null
            }
        },
        mounted(){
            this.$nextTick(()=>{
                let scroll = setScroll(BScroll,true,'.departmentView')
                this.scroll = scroll
            })
        },
        methods:{
            goStart(){
                this.$router.replace({path:'/'})
            }
        }
    }
</script>
<style lang="less" scoped>
    .department {
        font-size: .3rem;
        padding: .3rem 0 1rem 0;
        .departmentView {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0 .3rem 1rem .3rem;
            box-sizing: border-box;
            .content {
                padding-bottom: 1rem;
            }
            .list {
                height:3rem;
                background:rgba(255,255,255,1);
                box-shadow:0px 3px 15px 0px rgba(217,217,217,0.5);
                border-radius:.1rem;
                overflow: hidden;
                margin-bottom: .3rem;
            }
            .top {
                height: 1rem;
                line-height: 1rem;
                background: url('../images/bg-title.png') 100% 100% no-repeat;
                padding: 0 .3rem;
                box-sizing: border-box;
                p {
                    position: relative;
                    color: #fff;
                    img {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        width: .4rem;
                        height: .4rem;
                        margin-top: -0.2rem;
                    }
                }
            }
            .main {
                font-size: .28rem;
                padding: .3rem;
                p {
                    line-height: .5rem;
                }
            }
        }
    }
</style>