<template>
  <div class="service">
    <header-nav  :id="id"/>

    <div class="w sharonPic">
      <img src="../assets/image/shalong.jpg">
    </div>
    <!-- 沙龙内容部分 -->
    <div class="w sharoncont">

      <div class="wthree shaIcon">
        服务项目
      </div>
      <img src="../assets/image/sl.png">

      <div class="wseven shamatter">
        <div class="shuIcon"></div>
        <div class="hengIcon"></div>
        暂无内容
      </div>
    </div>

    <footer-nav/>
  </div>
</template>

<script type="text/javascript">
import headerNav from '@/components/header';
import footerNav from '@/components/footer';
export default {
  data() {
    return {
       id: 10,
    };
  },
  components: {
    headerNav,
    footerNav
  },
  created() {

  },
  methods: {

  }
};
</script>

<style type="text/css">
.service {

}
.service .sharonPic {
  overflow: hidden;
  margin-top: 20px;
  height: 300px;
}
.service .sharonPic img {
  height: 100%;
  width: 100%;
}
.service .sharoncont {

  position: relative;
}
.service .sharoncont img {
  position: absolute;
  left: -11px;
  top: 13px;

}
.service .shaIcon {
  position: relative;
  border: 1px solid #cccccc;
  height: 120px;
  line-height: 120px;
  margin-top: 20px;
  text-align: center;

}
.service .shamatter {
  border: 1px solid #cccccc;
  height: 120px;
  line-height: 120px;
  margin-top: 20px;
  text-align: center;
}
.service .shamatter .shuIcon {
  width: 4px;
  background-color: #79c71e;
  height: 15px;
  margin-top: 10px;
  margin-left: 8px;
}
.service .shamatter .hengIcon {
  width: 100%;
  background-color: #79c71e;
  height: 4px;
  margin-top: 10px;
}
</style>
