Bladeren bron

更新消息

dev
Eddie 3 jaren geleden
bovenliggende
commit
4340d02cae
5 gewijzigde bestanden met toevoegingen van 365 en 46 verwijderingen
  1. +15
    -0
      src/assets/sass/_app.scss
  2. +14
    -14
      src/router/index.js
  3. +332
    -29
      src/views/Chat.vue
  4. +2
    -1
      src/views/CreateAn.vue
  5. +2
    -2
      src/views/index.vue

+ 15
- 0
src/assets/sass/_app.scss Bestand weergeven

@@ -131,4 +131,19 @@
.el-carousel__arrow--left {
display: none;

}

.el-dialog, .el-pager li {
background: none;
}

.el-pagination .btn-next, .el-pagination .btn-prev {
background: none;

}

.pagination-box {
.el-pagination button:disabled {
background: none;
}
}

+ 14
- 14
src/router/index.js Bestand weergeven

@@ -384,22 +384,22 @@ const routes = [
}
];

const router = new VueRouter({
routes,
})

// const router = new VueRouter({
// mode: 'hash', //history
// base: process.env.BASE_URL,
// routes,
// scrollBehavior(to, from, savedPosition) {
// if (savedPosition) {
// return savedPosition;
// } else {
// return { x: 0, y: 0 };
// }
// }
// });
// })

const router = new VueRouter({
mode: 'history', //history
base: process.env.BASE_URL,
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
}
});

router.beforeEach((to, from, next) => {
document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺'


+ 332
- 29
src/views/Chat.vue Bestand weergeven

@@ -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>

+ 2
- 1
src/views/CreateAn.vue Bestand weergeven

@@ -109,11 +109,12 @@ export default {

mounted() {
// this.getInit()
this.getInit()
},
methods: {

getInit: function(){
console.log(123)
aget('/api/myapp/list').then(res=>{
console.log(res)
})


+ 2
- 2
src/views/index.vue Bestand weergeven

@@ -46,7 +46,7 @@
</div>
</div>
<!-- 方案解决 -->
<div class="content-title intro-x">
<div class="content-title intro-Y">
<p class="p1">多终端产品线 全覆盖</p>
<p class="p2">全面覆盖多终端产品线,智颖系统智能集成系</p>
</div>
@@ -64,7 +64,7 @@
alt=""
/>
</div>
<div class="item-Text">
<div class="item-Text -intro-x">
<div class="text1">全原生开发</div>
<div class="text2">支持安卓,iOS,iPad终端全平台运营</div>
</div>


Laden…
Annuleren
Opslaan