-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
261 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,244 @@ | ||
| <template> | ||
| <div calss="cow-container"> | ||
| <div class="cow-top"> | ||
| <div class="cow-choiceness"> | ||
| <div class="text">精选</div> | ||
| <div class="desc">双11你准备给你老婆买啥</div> | ||
| <Icon type="ios-planet" class="star" color="#f5f5f56b" /> | ||
| </div> | ||
| <div class="cow-hot"> | ||
| <div class="text">热门</div> | ||
| <div class="desc">99年世界末日了解一下</div> | ||
| <Icon type="ios-analytics" class="hot" color="#f5f5f56b" /> | ||
| </div> | ||
| </div> | ||
| <div class="cow-list"> | ||
| <div class="cow-item" v-for="(item,index) in cowList" :key="index"> | ||
| <div class="item-head"> | ||
| <img v-bind:src="item.header" /> | ||
| <span class="author">{{item.author}}</span> | ||
| <span class="focus">关注</span> | ||
| </div> | ||
| <div class="item-content" @click="link(item)"> | ||
| <span class="title">【{{item.title}}】</span> | ||
| {{splitContent(item)}} | ||
| <!-- <span | ||
| @click="item.show=!item.show" | ||
| v-show="item.show" | ||
| class="all-text" | ||
| >全文</span>--> | ||
| <span v-show="item.show" class="all-text">全文</span> | ||
| </div> | ||
| <div class="item-imgs"> | ||
| <img | ||
| :class="item.class" | ||
| v-for="(imgItem,imgIndex) in item.imgs" | ||
| v-bind:src="imgItem" | ||
| :key="imgIndex" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| cowList: [ | ||
| { | ||
| title: "暗恋一个女生,昨天请她出来看电影..", | ||
| author: "路边观察社北京一分社", | ||
| header: | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/head3.jpg", | ||
| content: | ||
| " 暗恋一个女生很久了，昨天请她出来看电影，当我准时到影院时，才发现自己没带钱。值得庆幸的是，她像往常一样，并没有赴约,这终究是人生的大幸还是不幸，点了支烟，我茫然深思", | ||
| imgs: [ | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg" | ||
| ] | ||
| }, | ||
| { | ||
| title: "听说女人和男人在床上说得最多的一句是", | ||
| author: "路边观察社北京二分社", | ||
| header: | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/head1.jpg", | ||
| content: | ||
| " “你压着我头发了。”现在看电视剧终于明白为什么男二号总对男一号说：“你要敢动她根头发我和你没完！.....................", | ||
| imgs: [ | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/xx.jpg", | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg" | ||
| ] | ||
| }, | ||
| { | ||
| title: "2019年7月26日早 灰暗的云彩笼罩了天空", | ||
| author: "路边观察社北京三分社", | ||
| header: | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/head3.jpg", | ||
| content: | ||
| " 显得那样阴霾 我蹒跚着走到了那个地方 一切还是那么熟悉 强颜欢笑的和熟悉的熟人打着招呼 看得出 他们也在强颜欢笑 走到了那个非常熟悉的人的面前 深深的吸了一口气 还是那熟悉的问道 无语凝视着 我缓缓的递过去带着体温的八元钱 淡淡的说道 ：“老样子” 他苦笑着摇摇头，说：“不够” “不够？”内心不禁起波澜，难道涨的这么快吗，安抚住心内的汹涌澎湃，我试探着问道：“那来一个？”他依然苦笑着摇头。“纳尼，以前四块钱一个的肉夹馍，肿么现在八元钱一个都不够了哇，告诉我，这是为什么，到底是为什么？”此刻我有些抓狂，肾上腺激素飙高，显然我有些失控了。“亲，我也没办法，猪肉都22一斤了。。。。。。”看着他那也是万般无奈的表情，我颓然的放下那拿着带着体温的钱的手，默默的低下来头，惆怅的转身而去，拉长的身影，显得那么的黑暗无助。。。。。。", | ||
| imgs: [ | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/xx.jpg", | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x1.jpg", | ||
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg" | ||
| ] | ||
| } | ||
| ] | ||
| }; | ||
| }, | ||
| methods: { | ||
| link(item) { | ||
| this.$message.error(item.title); | ||
| }, | ||
| imgClass() { | ||
| return "a2"; | ||
| }, | ||
| splitContent(item) { | ||
| if (item.imgs && item.imgs.length > 0) { | ||
| item.class = "img" + item.imgs.length; | ||
| } | ||
| if (item.content.length < 80) { | ||
| item.show = false; | ||
| return item.content; | ||
| } | ||
| item.show = true; | ||
| return item.content.substring(0, 80) + "..."; | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| <style scoped> | ||
| .cow-container { | ||
| height: 100%; | ||
| } | ||
| .cow-top { | ||
| background: white; | ||
| display: inline-block; | ||
| width: 100%; | ||
| padding: 0 4px; | ||
| } | ||
| .cow-top > div { | ||
| float: left; | ||
| width: 49%; | ||
| text-align: left; | ||
| } | ||
| .cow-top > div:first-child { | ||
| background: #57a3f3; | ||
| padding: 10px; | ||
| color: white; | ||
| border-radius: 5px; | ||
| margin-right: 2%; | ||
| } | ||
| .cow-top > div:last-child { | ||
| background: #ff4081; | ||
| padding: 10px; | ||
| color: white; | ||
| border-radius: 5px; | ||
| } | ||
| .cow-top > div .text { | ||
| font-size: 20px; | ||
| } | ||
| .cow-top > div .desc { | ||
| font-size: 12px; | ||
| } | ||
| .cow-choiceness .star { | ||
| color: #f5f5f56b; | ||
| position: relative; | ||
| float: right; | ||
| top: -5px; | ||
| right: -5px; | ||
| margin-top: -54px; | ||
| font-size: 46px; | ||
| border: 0px; | ||
| } | ||
| .cow-hot .hot { | ||
| color: #f5f5f56b; | ||
| position: relative; | ||
| float: right; | ||
| top: -5px; | ||
| right: -5px; | ||
| margin-top: -54px; | ||
| font-size: 46px; | ||
| border: 0px; | ||
| } | ||
| .item-head { | ||
| border-bottom: 1px solid #eee; | ||
| margin-bottom: 12px; | ||
| text-align: left; | ||
| } | ||
| .item-head img { | ||
| height: 25px; | ||
| width: 25px; | ||
| border-radius: 50%; | ||
| margin-right: 10px; | ||
| } | ||
| .item-head span { | ||
| position: relative; | ||
| top: -5px; | ||
| font-size: 15px; | ||
| } | ||
| .item-head .focus { | ||
| position: relative; | ||
| top: 0; | ||
| font-size: 15px; | ||
| float: right; | ||
| padding: 0px 10px; | ||
| border-radius: 15px; | ||
| border: 1px solid #f9d9d9; | ||
| color: #f44336; | ||
| } | ||
| .item-imgs{ | ||
| max-height: 180px; | ||
| /* width: 300px; */ | ||
| /* height: 50px; */ | ||
| line-height: 25px; | ||
| overflow: hidden; | ||
| } | ||
| .item-imgs .img1 { | ||
| width: 100%; | ||
| /* max-height: 180px; */ | ||
| } | ||
| .item-imgs .img2 { | ||
| width: 49%; | ||
| height: 120px; | ||
| } | ||
| .item-imgs .img3 { | ||
| width: 32%; | ||
| height: 75px; | ||
| } | ||
| .item-imgs .img3:first-child, | ||
| .item-imgs .img2:first-child { | ||
| margin-right: 2%; | ||
| } | ||
| .item-imgs .img3:last-child { | ||
| margin-left: 2%; | ||
| } | ||
| .cow-item { | ||
| background: white; | ||
| padding: 10px; | ||
| margin-bottom: 8px; | ||
| } | ||
| .cow-item:hover { | ||
| cursor: pointer; | ||
| } | ||
| .item-imgs { | ||
| margin-top: 9px; | ||
| } | ||
| .item-content { | ||
| letter-spacing: 1.2px; | ||
| text-align: left; | ||
| color: #8b8787; | ||
| } | ||
| .item-content .title { | ||
| font-size: 15px; | ||
| color: #353535; | ||
| } | ||
| .item-content .all-text { | ||
| color: blue; | ||
| } | ||
| .cow-list { | ||
| border: 1px solid #eee; | ||
| } | ||
| </style> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters