haitu
/
aigc-h5
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

行业洞察12行业

master
fuxiaochun 2023-08-15 16:54:14 +08:00
parent a186705d45
commit c4f269efc1
3 changed files with 112 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/business/components/CategoryCardList.vue
View File

@ -1,16 +1,21 @@
<template>
<div class="listBox">
<template v-if="dataList != null">
<ul v-if="dataList.length > 0">
<li :key="item.id" v-for="item in dataList" @click="goDetail(item.id)">
<img :src="item.cover" :alt="item.title">
<div class="title">
<h2>{{item.title}}</h2>
<span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd')}}</span>
</div>
<div class="desc">{{item.description }}</div>
</li>
</ul>
<template v-if="dataList.length > 0">
<ul>
<li :key="item.id" v-for="item in dataList" @click="goDetail(item.id)">
<img :src="item.cover" :alt="item.title">
<div class="title">
<h2>{{ item.title }}</h2>
<span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}</span>
</div>
<div class="desc">{{ item.description }}</div>
</li>
</ul>
<div class="pageBox" v-if="hasMore">
<div class="loadMore" @click="loadMore">加载更多</div>
</div>
</template>
<div class="placeholder" v-else>{{ placeholder }}</div>
</template>
<template v-else>
@ -40,6 +45,7 @@ const pageNum = ref(1);
const result = ref({});
const dataList = ref([]);
const placeholder = ref('');
const hasMore = ref(false);
onMounted(()=>{
getList();
@ -55,7 +61,8 @@ const getList = ()=>{
};
http('/api/article', params, 'get').then(res => {
result.value = res.data;
dataList.value = res.data.data || [];
dataList.value = dataList.value.concat(res.data.data || []) ;
hasMore.value = res.data.current_page < res.data.last_page;
placeholder.value = dataList.value.length == 0 ? '暂无数据' : '';
}).catch(err => {
showToast(err.message);
@ -63,8 +70,13 @@ const getList = ()=>{
});
};
const loadMore = ()=>{
pageNum.value += 1;
getList();
};
const goDetail = (id) => {
router.push(`/insights/category/${props.cid}/${id}`);
router.push(`/business/insight/detail/${props.cid}/${id}`);
};
@ -72,38 +84,39 @@ const goDetail = (id) => {
<style lang="scss" scoped>
.listBox{
margin-top: 20px;
padding: 20px;
position: relative;
ul{
display: flex;
flex-wrap: wrap;
}
li{
width: 370px;
height: 305px;
width: 100%;
height: 408px;
background: #D6D6DD;
border-radius: 3px;
border: 2px solid #D6D6DD;
margin: 0 17px 34px 17px;
border: 5px solid #D6D6DD;
margin-bottom: 20px;
color: #333;
cursor: pointer;
img{
width: 364px;
height: 205px;
width: 100%;
height: 264px;
display: block;
margin: 0 auto;
background-color: #666;
}
.title{
height: 36px;
height: 80px;
width: 100%;
padding: 17px;
padding: 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
h2{
height: 36px;
height: 40px;
font-weight: bold;
font-size: 18px;
line-height: 36px;
font-size: 28px;
line-height: 40px;
margin-right: 10px;
flex: 1;
overflow: hidden;
@ -111,36 +124,42 @@ const goDetail = (id) => {
white-space: nowrap;
}
span{
height: 36px;
line-height: 36px;
height: 40px;
line-height: 40px;
display: inline-block;
font-size: 12px;
font-size: 22px;
}
}
.desc{
padding: 5px 10px;
font-size: 12px;
line-height: 22px;
padding: 10px;
font-size: 22px;
font-weight: bold;
line-height: 30px;
}
}
.pagesBox{
.pageBox{
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
a{
color: #FFF;
padding: 30px 0;
.loadMore{
padding: 10px 30px;
border: 1px solid #CCC;
border-radius: 4px;
font-size: 23px;
color: #CCC;
}
}
.placeholder{
width: 100%;
height: 300px;
height: 60vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-size: 24px;
color: #FFF;
}
}

151
src/views/business/detail.vue
View File

@ -1,94 +1,35 @@
<template>
<BackPage title="上一页" :url="`/insights/category/${cid}`">
<div class="pageContainer">
<div class="mainBox">
<div class="breadNav">
<router-link to="/home">首页</router-link><span>&gt;</span>
<router-link to="/insights">AI商情</router-link><span>&gt;</span>
<router-link to="/insights/category">行业洞察</router-link><span>&gt;</span>
<router-link :to="`/insights/category/${category.id}`" v-if="category.id">{{category.name}}</router-link><span v-if="category.id">&gt;</span>
<span>详情</span>
</div>
<div class="article" v-if="detail">
<h1 class="title">{{detail.title}}</h1>
<div class="props">
<span>作者：{{detail.author }}</span>
<span>责编：{{detail.editor }}</span>
<span>{{DateFormat(new Date(detail.published_at * 1000), 'yyyy.MM.dd')}}</span>
</div>
<div class="info">
<div v-html="detail.content"></div>
</div>
<!-- <div class="recommend">
<div class="blockTitle">推荐文章</div>
<ul>
<li>
<div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
<div class="info">
<h3>政策最新解读</h3>
<p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
<span>2023.05.19</span>
</div>
</li>
<li>
<div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
<div class="info">
<h3>政策最新解读</h3>
<p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
<span>2023.05.19</span>
</div>
</li>
<li>
<div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
<div class="info">
<h3>政策最新解读</h3>
<p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
<span>2023.05.19</span>
</div>
</li>
<li>
<div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
<div class="info">
<h3>政策最新解读</h3>
<p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
<span>2023.05.19</span>
</div>
</li>
<li>
<div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
<div class="info">
<h3>政策最新解读</h3>
<p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
<span>2023.05.19</span>
</div>
</li>
<li>
<div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
<div class="info">
<h3>政策最新解读</h3>
<p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
<span>2023.05.19</span>
</div>
</li>
</ul>
</div> -->
</div>
<div class="loadingBox" v-else>数据加载中...</div>
<div class="breadNav">
<router-link to="/home">首页</router-link><span>&gt;</span>
<router-link to="/business">AI商情</router-link><span>&gt;</span>
<router-link to="/business/insight">行业洞察</router-link><span>&gt;</span>
<router-link :to="`/business/insight/category/${category.id}`" v-if="category.id">{{category.name}}</router-link><span v-if="category.id">&gt;</span>
<span>详情</span>
</div>
<AiAssistant></AiAssistant>
<div class="article" v-if="detail">
<h1 class="title">{{detail.title}}</h1>
<div class="props">
<span>作者：{{detail.author }}</span>
<span>责编：{{detail.editor }}</span>
<span>{{DateFormat(new Date(detail.published_at * 1000), 'yyyy.MM.dd')}}</span>
</div>
<div class="info">
<div v-html="detail.content"></div>
</div>
</div>
<div class="loadingBox" v-else>数据加载中...</div>
<!-- <AiAssistant></AiAssistant> -->
</div>
</BackPage>
</template>
<script setup>
import { LeftCircleOutlined } from '@ant-design/icons-vue';
import { ref, onBeforeMount, onMounted } from 'vue';
import http from '@/io/http';
import { message } from 'ant-design-vue';
import { showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import { DateFormat } from '@/utils/format.js';
import AiAssistant from '@/views/chat/components/ai-assistant.vue';
import BackPage from '@/components/BackPage/index.vue'
// import AiAssistant from '@/views/chat/components/ai-assistant.vue';
const router = useRouter();
const route = useRoute();
@ -110,7 +51,7 @@ const getCategories = () => {
http('/api/keywords', params, 'get').then(res => {
category.value = res.data.filter(v => v.id == cid.value)[0];
}).catch(err => {
message.error(err.message);
showToast(err.message);
});
};
@ -118,7 +59,7 @@ const getDetail = ()=>{
http(`/api/article/${id.value}`, {}, 'get').then(res => {
detail.value = res.data;
}).catch(err => {
message.error(err.message);
showToast(err.message);
});
};
@ -131,45 +72,13 @@ const goBack = () => {
<style lang="scss" scoped>
.pageContainer{
color: #FFF;
width: 90rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
.mainBox{
flex: 1;
background: #242527;
padding: 20px;
}
.sidebar{
width: 260px;
margin-left: 20px;
.pageNav{
width: 100%;
padding: 20px 0;
display: flex;
justify-content: flex-end;
align-items: center;
.prePage{
height: 36px;
padding-left: 40px;
background: url('@/assets/images/icon_left_arrow_circle@2x.png') no-repeat left center;
background-size: 36px 36px;
line-height: 36px;
cursor: pointer;
&:hover{
text-decoration: underline;
}
}
}
.sideBlock{
width: 100%;
margin-top: 20px;
}
}
padding: 25px;
background-color: #242527;
.breadNav{
height: 30px;
line-height: 30px;
color: #999;
font-size: 22px;
span{
padding: 0 5px;
}
@ -186,13 +95,15 @@ const goBack = () => {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-size: 24px;
}
.article{
padding: 20px 0;
.title{
font-size: 27px;
font-size: 26px;
line-height: 30px;
font-weight: bold;
color: #FFF;
text-align: center;
padding: 10px 0;
}
@ -201,6 +112,7 @@ const goBack = () => {
text-align: center;
line-height: 30px;
color: #999;
font-size: 23px;
span{
display: inline-block;
margin: 10px;
@ -208,6 +120,7 @@ const goBack = () => {
}
.info{
line-height: 1.5;
font-size: 23px;
:deep(p){
padding: 10px 0;
}

68
src/views/business/list.vue
View File

@ -1,11 +1,9 @@
<template>
<div class="pageContainer">
<div class="banner" :style="`background-image: url(${banner.picture})`">
<div class="bannerContent">
<div class="desc">
<h2>{{banner.name}}</h2>
<p>{{banner.description }}</p>
</div>
<div class="desc">
<h2>{{ banner.name }}</h2>
<p>{{ banner.description }}</p>
</div>
</div>
<div class="mainBox">
@ -63,12 +61,8 @@ const getCategories = ()=>{
});
};
const goBack = () => {
router.push('/insights/category');
};
const jump = (cid)=>{
router.push(`/insights/category/${cid}`);
router.push(`/business/insight/category/${cid}`);
};
</script>
@ -78,17 +72,11 @@ const jump = (cid)=>{
color: #FFF;
.banner{
width: 100%;
height: 17.6rem;
height: 216px;
background-color: rgba($color: #FFF, $alpha: 0.5);
background-repeat: no-repeat;
background-size: contain;
background-size: cover;
background-position: center center;
.bannerContent{
width: 90rem;
height: 17.6rem;
margin: 0 auto;
position: relative;
}
.desc{
width: 100%;
height: 100%;
@ -98,45 +86,37 @@ const jump = (cid)=>{
align-items: center;
text-align: center;
h2{
font-size: 36px;
font-size: 27px;
}
p{
width: 326px;
font-size: 12px;
line-height: 20px;
width: 460px;
font-size: 23px;
line-height: 30px;
padding: 10px 0;
}
}
.nav{
position: absolute;
top: 38px;
right: 20px;
font-size: 16px;
cursor: pointer;
line-height: 30px;
display: flex;
align-items: center;
span{
margin-left: 10px;
}
}
}
.mainBox{
width: 90rem;
margin: 20px auto;
width: 100%;
.menu{
width: 100%;
height: 90px;
overflow-y: hidden;
overflow-x: auto;
display: flex;
padding: 10px 0;
flex-wrap: wrap;
padding: 20px;
flex-wrap: nowrap;
position: relative;
li{
height: 48px;
padding: 0 20px;
border-radius: 3px;
color: #999;
line-height: 30px;
margin-left: 17px;
margin-bottom: 10px;
cursor: pointer;
&:hover,
line-height: 48px;
margin-right: 20px;
font-size: 28px;
white-space: nowrap;
&:active,
&.active{
background: #3662FE;
color: #FFF;