Authored by 郭成尧

资讯列表页面基本

1 -<div class="index"> 1 +<div id="index">
2 <index-box></index-box> 2 <index-box></index-box>
3 </div> 3 </div>
1 <template> 1 <template>
2 - <div></div> 2 + <resources v-bind:content-code.sync="contentCode"></resources>
  3 + <div v-for="news in newsList" class="news-box">
  4 + <span class="tag">{{news.tag}}</span>
  5 + <div class="img">
  6 + <a href="{{news.href}}">
  7 + <img src="{{news.src}}" alt="" />
  8 + </a>
  9 + </div>
  10 + <div class="title"><a href="{{news.href}}">{{news.title}}</a></div>
  11 + <div class="news-des">
  12 + {{news.des}}
  13 + </div>
  14 + <div class="bottom">
  15 + <span class="icon time-icon"></span>
  16 + <span class="time">{{news.time}}</span>
  17 + <span class="icon share"></span>
  18 + </div>
  19 + </div>
3 </template> 20 </template>
4 <style> 21 <style>
  22 + .news-box {
  23 + position: absolute;
  24 +
  25 + .tag {
  26 + position: relative;
  27 + top: 35px;
  28 + left: 0;
  29 + padding: 5px;
  30 + background: #000;
  31 + color: #fff;
  32 + }
  33 + .img {
  34 + width: 100%;
  35 + height: auto;
  36 + overflow: hidden;
  37 +
  38 + img {
  39 + width: 100%;
  40 + }
  41 + }
  42 +
  43 + .title {
  44 + font-size: 32px;
  45 + font-weight: 700;
  46 + padding: 10px 20px;
  47 + }
  48 +
  49 + .news-des {
  50 + padding: 10px 20px;
  51 + color: #939393;
  52 + }
  53 +
  54 + .bottom {
  55 + padding: 10px 20px;
  56 + color: #939393;
  57 + }
  58 + }
5 </style> 59 </style>
6 <script> 60 <script>
  61 + const contentCode = require('content-code');
  62 + const resources = require('component/resources/index.vue');
  63 + const qs = require('yoho-qs');
  64 +
7 module.exports = { 65 module.exports = {
8 data() { 66 data() {
9 return { 67 return {
10 - msg: 'hello vue' 68 + contentCode: contentCode.brand[qs.brand || 'men'],
  69 + newsList: [
  70 + {
  71 + href: '//m.yoholbk.com',
  72 + title: '这是一个标题',
  73 + des: '这是一个副标题',
  74 + time: '04.19 18.05',
  75 + tag: '运动',
  76 + src: 'http://7xwj52.com1.z0.glb.clouddn.com/brandbg.jpg',
  77 + }
  78 + ]
11 }; 79 };
  80 + },
  81 + components: {
  82 + resources
12 } 83 }
13 }; 84 };
14 </script> 85 </script>