yiliaoqiantai-web/src/views/healthfestival.vue

<template>
  <div class="healthfestival">
    <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>
        <span class="biaoti">卫生节日一览</span>
        <div class="hengIcon"></div>
        <div  class="health">
          <table>
              <tr v-for="(item, index) in listData">
                <td><span>{{item.title}}</span></td>
                <td><span>{{item.data}}</span></td>
                <td><span>{{item.titletwo}}</span></td>
                <td><span>{{item.datatwo}}</span></td>
              </tr>
          </table>
        </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: 9,
        listData: [
        {
            'title': '世界防治麻风病日',
            'data': '1月最后一个星期日',
            'titletwo': '世界癌症日',
            'datatwo': '2月4日',
        }, {
            'title': '世界罕见病日',
            'data': '2月的最后一天',
            'titletwo': '全国爱耳日',
            'datatwo': '3月3日',
        }, {

            'title': '世界青光眼日',
            'data': '3月6日',
            'titletwo': '中国国医节',
            'datatwo': '3月17日'
        }, {
            'title': '全国爱肝日',
            'data': '3月18日',
            'titletwo': '世界肾脏日',
            'datatwo': '3月份的第二个星期四',

        }, {
            'title': '世界睡眠日',
            'data': '3月21日',
            'titletwo': '世界防治结核病日',
            'datatwo': '3月24日',

        }, {
            'title': '全国爱国卫生月',
            'data': '4月',
            'titletwo': '世界自闭症日',
            'datatwo': '4月2日'
        },{
            'title': '世界卫生日',
            'data': '4月7日',
            'titletwo': '世界帕金森病日',
            'datatwo': '4月11日',

        }, {
            'title': '全国肿瘤防治宣传周',
            'data': '4月15日～21日',
            'titletwo': '全国爱鼻日',
            'datatwo': '4月的第二个星期六',

        }, {
            'title': '世界血友病日',
            'data': '4月17日',
            'titletwo': '世界防治疟疾日',
            'datatwo': '4月25日'
        },{
            'title': '全国儿童预防接种宣传日',
            'data': '4月25日',
            'titletwo': '世界安全生产与健康日',
            'datatwo': '4月28日',

        }, {
            'title': '世界防治哮喘日',
            'data': '5月的第一个周二',
            'titletwo': '世界红十字日',
            'datatwo': '5月8日',

        }, {
            'title': '国际护士节',
            'data': '5月12日',
            'titletwo': '全国碘缺乏病日',
            'datatwo': '5月15日'
        },{
            'title': '世界高血压日',
            'data': '5月17日',
            'titletwo': '全国学生营养日',
            'datatwo': '5月20日',

        }, {
            'title': '全国母乳喂养宣传日',
            'data': '5月20日',
            'titletwo': '世界向人体条件挑战日',
            'datatwo': '5月26日',

        }, {
            'title': '世界无烟日',
            'data': '5月31日',
            'titletwo': '世界牛奶日',
            'datatwo': '6月1日'
        },{
            'title': '全国爱眼日',
            'data': '6月6日',
            'titletwo': '世界献血日',
            'datatwo': '6月14日',

        }, {
            'title': '世界渐冻人日',
            'data': '6月21日',
            'titletwo': '国际禁毒日',
            'datatwo': '6月26日',

        }, {
            'title': '国际癫痫关爱日',
            'data': '6月28日',
            'titletwo': '全国科普行动日',
            'datatwo': '6月29日'
        },{
            'title': '世界过敏性疾病日',
            'data': '7月8日',
            'titletwo': '世界肝炎日',
            'datatwo': '7月28日',

        }, {
            'title': '世界母乳喂养周',
            'data': '8月1日至7日',
            'titletwo': '全民健身日',
            'datatwo': '8月8日',

        }, {
            'title': '关爱义齿周',
            'data': '8月最后一周',
            'titletwo': '世界预防自杀日',
            'datatwo': '9月10日'
        },{
            'title': '中国预防出生缺陷日',
            'data': '9月12日',
            'titletwo': '世界淋巴瘤日',
            'datatwo': '9月15日',

        }, {
            'title': '中国脑健康日',
            'data': '9月16日',
            'titletwo': '世界急救日',
            'datatwo': '9月的第二个周六',

        }, {
            'title': '爱牙日',
            'data': '9月20日',
            'titletwo': '中华老年痴呆日',
            'datatwo': '9月21日'
        },{
            'title': '世界阿尔茨海默病日',
            'data': '9月21日',
            'titletwo': '国际聋人日',
            'datatwo': '9月28日',

        }, {
            'title': '世界心脏日',
            'data': '9月的最后一个星期日',
            'titletwo': '世界精神卫生日',
            'datatwo': '10月10日',
        }, {
             'title': '世界镇痛日',
            'data': '10月11日',
            'titletwo': '世界关节炎日',
            'datatwo': '10月12日'
        },{
            'title': '世界保健日',
            'data': '10月13日',
            'titletwo': '世界视力日',
            'datatwo': '10月第二个星期四',

        }, {
            'title': '国际盲人节',
            'data': '10月15日',
            'titletwo': '全球洗手日',
            'datatwo': '10月15日',

        }, {
            'title': '世界骨质疏松日',
            'data': '10月20日',
            'titletwo': '世界传统医药日',
            'datatwo': '10月22日'
        },{
            'title': '世界男性健康日',
            'data': '10月28日',
            'titletwo': '世界卒中日',
            'datatwo': '10月29日',

        }, {
            'title': '全球肺癌关注月',
            'data': '11月',
            'titletwo': '联合国糖尿病日',
            'datatwo': '11月14日',

        }, {
            'title': '世界慢阻肺日',
            'data': '11月第三周的周三',
            'titletwo': '世界艾滋病日',
            'datatwo': '12月1日'
        },{
            'title': '国际残疾人日',
            'data': '12月3日',
            'titletwo': '世界强化免疫日',
            'datatwo': '12月15日',

        }
      ],
    };
  },
  components: {
    headerNav,
    footerNav
  },
  created() {

  },
  methods: {

  }
};
</script>

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

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

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

}
.healthfestival .shaIcon {
  position: relative;
  border: 1px solid #cccccc;
  height: 120px;
  line-height: 120px;
  margin-top: 20px;
  text-align: center;
}
.healthfestival .shamatter {
  position: relative;
  border: 1px solid #cccccc;
  margin-top: 20px;
}
.healthfestival .shamatter .shuIcon {
  width: 4px;
  background-color: #14A24B;
  height: 15px;
  margin-top: 10px;
  margin-left: 8px;
}
.healthfestival .shamatter .hengIcon {
  width: 100%;
  background-color: #14A24B;
  height: 4px;
  margin-top: 10px;
}
.healthfestival .shamatter .health  {
  margin-top: 15px;
}
.healthfestival .shamatter .health span {
  margin-left: 25px;
  font-size: 14px;
}
</style>