Showing
2 changed files
with
74 additions
and
3 deletions
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> |
-
Please register or login to post a comment