|
|
@@ -1,38 +1,80 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="intro-y flex flex-col sm:flex-row items-center mt-8"> |
|
|
|
<h2 class="text-lg font-medium mr-auto">Chat1</h2> |
|
|
|
<div class="w-full sm:w-auto flex mt-4 sm:mt-0"> |
|
|
|
<button class="button text-white bg-theme-1 shadow-md mr-2"> |
|
|
|
Start New Chat |
|
|
|
</button> |
|
|
|
<div class="dropdown ml-auto sm:ml-0"> |
|
|
|
<button |
|
|
|
class="dropdown-toggle button px-2 box text-gray-700" |
|
|
|
> |
|
|
|
<span class="w-5 h-5 flex items-center justify-center"> |
|
|
|
<PlusIcon class="w-4 h-4" /> |
|
|
|
</span> |
|
|
|
</button> |
|
|
|
<div class="dropdown-box w-40"> |
|
|
|
<div class="dropdown-box__content box p-2"> |
|
|
|
<a |
|
|
|
|
|
|
|
class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" |
|
|
|
> |
|
|
|
<UsersIcon class="w-4 h-4 mr-2" /> Create Group |
|
|
|
</a> |
|
|
|
<a |
|
|
|
|
|
|
|
class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" |
|
|
|
> |
|
|
|
<SettingsIcon class="w-4 h-4 mr-2" /> Settings |
|
|
|
</a> |
|
|
|
<h2 class="text-lg font-medium mr-auto">新闻列表</h2> |
|
|
|
</div> |
|
|
|
<div class="message-body"> |
|
|
|
<div class="message-box"> |
|
|
|
<div |
|
|
|
class="messageDiv" |
|
|
|
v-for="(item, index) in messageData" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<div class="PopStatus" v-show="item.type"> |
|
|
|
<div> |
|
|
|
<i |
|
|
|
class="el-icon-share" |
|
|
|
style="font-size: 15px; margin-right: 5px" |
|
|
|
></i |
|
|
|
><span>分享</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<i |
|
|
|
class="el-icon-download" |
|
|
|
style="font-size: 15px; margin-right: 5px" |
|
|
|
></i> |
|
|
|
<span>下载</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="mssageHeader"> |
|
|
|
<div class="headerItem"> |
|
|
|
<div class="head-"> |
|
|
|
<img |
|
|
|
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3244810419,3612941851&fm=11&gp=0.jpg" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="head-font"> |
|
|
|
<div style="font-size: 14px; colo: #2d3748">中秋佳节大促销</div> |
|
|
|
<div> |
|
|
|
<span style="color: #1890ff; font-size: 12px" |
|
|
|
>中秋佳节大促销</span |
|
|
|
> |
|
|
|
<span class="timeLeft" style="font-size: 12px; color: #718096" |
|
|
|
>11分钟前</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="headFloat-right" @click="itemPop(index)"> |
|
|
|
<div class="el-icon-more"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="headerContent"> |
|
|
|
<img :src="item.imgUrl" alt="" /> |
|
|
|
<div class="contentDiv"> |
|
|
|
<h1 style="font-size: 16px; margin: 0px 0 10px"> |
|
|
|
{{ item.h1 }} |
|
|
|
</h1> |
|
|
|
<h2 style="font-size: 14px"> |
|
|
|
{{ item.h2 }} |
|
|
|
</h2> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="pagination-box intro-x"> |
|
|
|
<el-pagination |
|
|
|
hide-on-single-page |
|
|
|
:page-size="20" |
|
|
|
:pager-count="11" |
|
|
|
layout="prev, pager, next" |
|
|
|
:total="1000" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -40,11 +82,272 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
messageData: [ |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
imgUrl: |
|
|
|
"https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1", |
|
|
|
h1: "智莺新上新,全场满1000减100智莺新", |
|
|
|
h2: |
|
|
|
" 智莺新上新,全场满1000减100智莺新上新,全场满1000减智莺新上新,全场满1000减100智莺新上新,全场满1000减100智莺新上新.", |
|
|
|
type: false, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
itemPop: function (index) { |
|
|
|
|
|
|
|
} |
|
|
|
for (let i in this.messageData) { |
|
|
|
if (i == index) { |
|
|
|
this.messageData[i].type = !this.messageData[i].type; |
|
|
|
} else { |
|
|
|
this.messageData[i].type = false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.message-body { |
|
|
|
width: calc(100% + 24px); |
|
|
|
} |
|
|
|
|
|
|
|
.message-box { |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
.messageDiv { |
|
|
|
width: 31.7%; |
|
|
|
height: 429px; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.03); |
|
|
|
opacity: 1; |
|
|
|
border-radius: 22px; |
|
|
|
float: left; |
|
|
|
margin: 24px 1.6% 24px 0; |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
.PopStatus { |
|
|
|
position: absolute; |
|
|
|
width: 152px; |
|
|
|
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16); |
|
|
|
border-radius: 6px; |
|
|
|
top: 47px; |
|
|
|
right: 20px; |
|
|
|
background: #fff; |
|
|
|
font-size: 14px; |
|
|
|
color: #2d3748; |
|
|
|
box-sizing: border-box; |
|
|
|
div { |
|
|
|
padding-left: 16px; |
|
|
|
height: 44px; |
|
|
|
line-height: 44px; |
|
|
|
} |
|
|
|
} |
|
|
|
.mssageHeader { |
|
|
|
width: 100%; |
|
|
|
height: 73px; |
|
|
|
box-sizing: border-box; |
|
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
|
box-sizing: border-box; |
|
|
|
.headerItem { |
|
|
|
padding: 15px 20px; |
|
|
|
overflow: hidden; |
|
|
|
height: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
.head- { |
|
|
|
float: left; |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
border-radius: 50%; |
|
|
|
overflow: hidden; |
|
|
|
margin-right: 12px; |
|
|
|
} |
|
|
|
.head-font { |
|
|
|
float: left; |
|
|
|
.timeLeft::before { |
|
|
|
vertical-align: 3px; |
|
|
|
content: ""; |
|
|
|
margin: 0 4px; |
|
|
|
width: 2px; |
|
|
|
height: 2px; |
|
|
|
display: inline-block; |
|
|
|
background: #718096; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
.headFloat-right { |
|
|
|
float: right; |
|
|
|
color: #718096; |
|
|
|
font-size: 16px; |
|
|
|
transform: rotate(90deg); |
|
|
|
height: 16px; |
|
|
|
width: 16px; |
|
|
|
text-align: center; |
|
|
|
line-height: 2; |
|
|
|
height: 100%; |
|
|
|
width: 50px; |
|
|
|
|
|
|
|
div { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.headerContent { |
|
|
|
padding: 15px 20px; |
|
|
|
overflow: hidden; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 224px; |
|
|
|
} |
|
|
|
.contentDiv { |
|
|
|
height: 111px; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
color: #2d3748; |
|
|
|
padding-top: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |