详情

mini-pro-web/src/router/index.js

@@ -90,6 +90,11 @@ const routes = [
        path: '/machine/small',
        name: 'machineSmall',
        component: () =>import('@/views/machine/small.vue')
    },
    {
        path: '/machine/detail',
        name: 'machineDetail',
        component: () => import('@/views/machine/detail.vue')
    }
    
]
@@ -100,7 +105,8 @@ const whiteList = [
	'/fotgetPassword',
    '/machine/index',
    '/machine',
    '/machine/small'
    '/machine/small',
    '/machine/detail'
]
const router = new VueRouter({

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

@@ -0,0 +1,48 @@
<template>
  <div>
    <img class="bg-img" src="./img/small_bg.png" alt="">
    <div class="title">医院特色服务</div>
    <img src="./img/tese.png" alt="" class="img">
    <div class="content">文章内容文章内容</div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.title{
  font-family: Alibaba Health Font 2.0 CN;
  font-size: 28px;
  color: #FFFFFF;
  font-style: italic;
  margin: 30px 0 20px 0;
  text-align: center;
}
.bg-img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.img{
  display: block;
  width: 333px;
  margin: 0 auto;
}
.content{
  width: 333px;
  border-radius: 7px;
  margin: 10px auto;
  opacity: 0.66;
  background: #FFFFFF;
  padding: 20px 12px;
  font-size: 11px;
  color: #333;
  min-height: 300px;
}
</style>

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

@@ -6,11 +6,16 @@
      <img src="./img/small_home.png" class="home-img" alt="" />
      返回取药
    </div>
    <van-swipe class="swipe">
      <van-swipe-item v-for="(item, index) in guanggaoList" :key="index">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <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="">
        <img src="./img/arrow-right.png" class="arrow" alt="" />
      </div>
    </div>
  </div>
@@ -46,6 +51,20 @@ export default {
          img: require('./img/dontai.png'),
          title: '科学减体重，家医长相伴'
        }
      ],
      guanggaoList: [
        {
          id: 1,
          img: require('./img/guanggao.png')
        },
        {
          id: 2,
          img: require('./img/guanggao.png')
        },
        {
          id: 3,
          img: require('./img/guanggao.png')
        }
      ]
    }
  },
@@ -87,7 +106,7 @@ export default {
}
.list-box {
  position: absolute;
  bottom: 7%;
  top: 52%;
  left: 50%;
  transform: translateX(-50%);
  height: 292px;
@@ -101,7 +120,7 @@ export default {
    border-radius: 4px;
    margin-bottom: 6px;
  }
  .list-img{
  .list-img {
    width: 83px;
    height: 57px;
    margin-right: 8px;
@@ -110,14 +129,43 @@ export default {
    width: 185px;
    font-size: 15px;
  }
  .arrow{
  .arrow {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
  &::-webkit-scrollbar{
  &::-webkit-scrollbar {
    display: none;
  }
}
.swipe {
  position: absolute;
  width: 333px;
  height: 187px;
  top: 19%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
  .van-swipe-item {
    height: 167px;
    img {
      border-radius: 4px;
    }
  }
}
::v-deep .van-swipe__indicators {
  bottom: 0px;
  .van-swipe__indicator {
    background: #fff;
    opacity: 1;
  }
  .van-swipe__indicator--active {
    background: #1c7cd5;
  }
}
</style>