index base

src/views/index/components/item.vue

+<template>
+  <div class="item">
+    <div class="left">
+      <div class="title"><span class="point"></span> {{ item.name }}</div>
+      <div class="detail" @click="$router.push(item.detailUrl)">
+        <img :src="eyes" alt="" />点击查看体检套餐详情
+      </div>
+    </div>
+    <div class="right">
+      <a-button
+        v-if="item.type == 2"
+        style="background: #ffcc00; color: white; border: none; width: 86px"
+        >查看</a-button
+      >
+      <a-button
+        v-else
+        style="background: #3f7ffb; color: white; border: none; width: 86px"
+        >立即预约</a-button
+      >
+      <div class="date">有效期至：{{ item.date }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "item",
+  components: {},
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      eyes: require("@/assets/imgs/index/eyes.png"),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.item {
+  display: flex;
+  justify-content: space-between;
+  background: #fafafa;
+  padding: 14.5px 12px;
+  border-radius: 8px;
+  margin-top: 12px;
+  .right {
+    text-align: right;
+    .date {
+      color: #999999;
+      font-size: 12px;
+      margin-top: 12px;
+    }
+  }
+  .left {
+    .title {
+      color: #333333;
+      font-size: 12px;
+      font-weight: bold;
+    }
+    .detail {
+      font-size: 12px;
+      color: #999999;
+      line-height: 30px;
+      margin-top: 12px;
+      cursor: pointer;
+      img {
+        position: relative;
+        top: -2px;
+        margin-right: 3px;
+      }
+    }
+  }
+}
+</style>

src/views/index/index.vue

 <template>
-  <div class="index">首页</div>
+  <div class="index">
+    <div class="appointment">
+      <div class="type"><span class="point"></span> 待预约的服务</div>
+      <div class="item-container">
+        <Item v-for="(item, index) in items" :item="item" :key="index" />
+      </div>
+    </div>
+    <div class="appointmented">
+      <div class="type"><span class="point"></span>已预约的服务</div>
+      <div class="item-container">
+        <Item v-for="(item, index) in itemb" :item="item" :key="index" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import Item from "./components/item.vue";
 export default {
-  components: {},
+  components: { Item },
   data() {
-    return {};
+    return {
+      items: [
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 1,
+          date: "2021-11-18",
+        },
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 1,
+          date: "2021-11-18",
+        },
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 1,
+          date: "2021-11-18",
+        },
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 1,
+          date: "2021-11-18",
+        },
+      ],
+      itemb: [
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 2,
+          date: "2021-11-18",
+        },
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 2,
+          date: "2021-11-18",
+        },
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 2,
+          date: "2021-11-18",
+        },
+        {
+          name: "体检套餐名称-某某单位-某某套餐",
+          detailUrl: "http://baidu.com",
+          type: 2,
+          date: "2021-11-18",
+        },
+      ],
+    };
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.index {
+  padding-bottom: 48px;
+  padding-top: 20px;
+  background-color: #fafafa;
+  .appointment,
+  .appointmented {
+    padding: 19.5px 14.5px 33.5px 14.5px;
+    background-color: white;
+    width: 900px;
+    margin: 0 auto;
+    .point {
+      display: inline-block;
+      border-radius: 5px;
+      width: 6px;
+      height: 6px;
+      background-color: #3f7ffb;
+      margin-right: 6px;
+      position: relative;
+      top: -1px;
+    }
+    border-radius: 8px;
+    .type {
+      font-size: 14px;
+      font-weight: bold;
+    }
+    .item-container {
+      margin-top: 8.5px;
+    }
+  }
+  .appointmented {
+    margin-top: 20px;
+    .point {
+      background-color: #ffcc00;
+    }
+  }
+}
+</style>