小屏

mini-pro-web/src/views/machine/small.vue

@@ -1,13 +1,123 @@
<template>
  <div></div>
  <div>
    <img src="./img/small_bg.png" alt="" class="bg-img" />
    <img src="./img/small_title.png" alt="" class="title-img" />
    <div class="back">
      <img src="./img/small_home.png" class="home-img" alt="" />
      返回取药
    </div>
    <div class="list-box">
      <div class="list-item" v-for="item in list" :key="item.id">
        <img :src="item.img" alt="" class="list-img" />
        <div class="list-title">{{ item.title }}</div>
        <img src="./img/arrow-right.png" class="arrow" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          img: require('./img/dontai.png'),
          title: '鼓浪屿医院特色服务介绍'
        },
        {
          id: 2,
          img: require('./img/dontai.png'),
          title: '关注老年健康，家庭医生就在家门口'
        },
        {
          id: 3,
          img: require('./img/dontai.png'),
          title: '家医使命 守护健康'
        },
        {
          id: 4,
          img: require('./img/dontai.png'),
          title: '科学减体重，家医长相伴'
        },
        {
          id: 5,
          img: require('./img/dontai.png'),
          title: '科学减体重，家医长相伴'
        }
      ]
    }
  },
  methods: {}
}
</script>
<style>
</style>
<style lang="scss" scoped>
.bg-img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.title-img {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
}
.back {
  position: absolute;
  top: 45%;
  right: 0;
  width: 83px;
  height: 25px;
  border-radius: 25px 0 0 25px;
  background: #d3e9f7;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #3d92e0;
  .home-img {
    width: 15px;
    height: 15px;
    margin: 0 6px;
  }
}
.list-box {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  height: 292px;
  width: 334px;
  overflow: auto;
  .list-item {
    padding: 5px;
    display: flex;
    align-items: center;
    background: #e4f5ff;
    border-radius: 4px;
    margin-bottom: 6px;
  }
  .list-img{
    width: 83px;
    height: 57px;
    margin-right: 8px;
  }
  .list-title {
    width: 185px;
    font-size: 15px;
  }
  .arrow{
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
  &::-webkit-scrollbar{
    display: none;
  }
}
</style>