kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序产品库完成

Browse Source
This commit is contained in:
aixianling
2022-02-14 17:25:54 +08:00
parent cb5f434edb
commit 8d2905428e
145 changed files with 22037 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/components/AiNewsList/AiNewsList.vue Normal file
View File

@@ -0,0 +1,202 @@
<template>
<section class="AiNewsList">
<slot name="header"/>
<slot v-if="$slots.content" name="content"/>
<div class="list-wrap" v-if="list && list.length">
<div class="list-card" v-for="(category,index) in list" :key="index" @click="$linkTo('/subPages/contentManager/contentDetail?id='+category.id)">
<div class="header">{{category.title}}</div>
<div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length == 1">
<img class="img" :src="item.url" v-for="(item,index) in category.files" :key="index.id" alt="">
</div>
<div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length > 1">
<img class="min-img" :src="item.url" v-for="(item,index) in category.files && category.files.slice(0,3)" :key="index.id" alt="">
</div>
<div class="content-wrap" v-if="category.contentType==1">
<img class="img" :src="category.pictureUrl" alt="">
<img class="play-icon" src="../../static/img/play.png" alt="">
</div>
<div class="bottom">
<div class="left">
<div class="tag">{{category.categoryName}}</div>
{{category.createTime}}
</div>
<div class="right">
<em>{{category.viewCount}}</em>
人看过
</div>
</div>
</div>
</div>
<AiEmpty v-else></AiEmpty>
</section>
</template>
<script>
import AiTopFixed from "../AiTopFixed/AiTopFixed";
import AiEmpty from "../../components/AiEmpty/AiEmpty"
export default {
name: "AiNewsList",
components: {AiTopFixed,AiEmpty},
props: {
list: {default: () => []},
props: {
default: () => ({
title: 'title',
type: "type",
createTime: "createTime",
count: "count",
})
},
loadmore: {default: "loadmore"}
}
}
</script>
<style lang="scss" scoped>
.AiNewsList {
height: 100vh;
background: #f3f6f9;
.listPane {
padding: 24px 32px 36px;
.card {
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
padding: 32px;
margin-bottom: 32px;
.title {
height: 50px;
font-size: 36px;
font-weight: 500;
color: #333333;
line-height: 50px;
margin-bottom: 24px;
}
.subTitle {
color: #999;
width: 100%;
.tag {
height: 48px;
background: #EEEEEE;
border-radius: 24px;
text-align: center;
line-height: 48px;
margin-right: 16px;
}
.count {
color: #4181FF;
}
.right{
margin-left: auto;
}
}
}
}
.list-wrap {
box-sizing: border-box;
padding: 32px;
.list-card {
width: 100%;
min-height: 100px;
background: #FFFFFF;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
border-radius: 16px;
box-sizing: border-box;
padding: 32px;
margin-bottom: 24px;
.header {
font-size: 36px;
font-weight: 600;
color: #333333;
line-height: 50px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.content-wrap {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 24px;
position: relative;
.img {
width: 100%;
height: 350px;
}
.min-img{
width: 204px;
height: 204px;
}
.play-icon{
width: 80px;
height: 80px;
border-radius:50%;
position:absolute;
left:50%;
top: 50%;
transform:translate(-50%,-50%);
}
}
.bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
.left {
display: flex;
align-items: center;
font-size: 28px;
font-weight: 400;
color: #999999;
.tag {
width: 144px;
height: 48px;
background: #EEEEEE;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 400;
color: #999999;
margin-right: 16px;
}
}
.right {
font-size: 28px;
font-weight: 400;
color: #999999;
display: flex;
align-items: center;
em {
font-style: normal;
color: #4181FF;
}
}
}
}
}
}
</style>