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

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

@ -1,94 +1,35 @@
<template> <template>
<BackPage title="上一页" :url="`/insights/category/${cid}`">
<div class="pageContainer"> <div class="pageContainer">
<div class="mainBox"> <div class="breadNav">
<div class="breadNav"> <router-link to="/home">首页</router-link><span>&gt;</span>
<router-link to="/home">首页</router-link><span>&gt;</span> <router-link to="/business">AI商情</router-link><span>&gt;</span>
<router-link to="/insights">AI商情</router-link><span>&gt;</span> <router-link to="/business/insight">行业洞察</router-link><span>&gt;</span>
<router-link to="/insights/category">行业洞察</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>
<router-link :to="`/insights/category/${category.id}`" v-if="category.id">{{category.name}}</router-link><span v-if="category.id">&gt;</span> <span>详情</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> </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> </div>
</BackPage>
</template> </template>
<script setup> <script setup>
import { LeftCircleOutlined } from '@ant-design/icons-vue';
import { ref, onBeforeMount, onMounted } from 'vue'; import { ref, onBeforeMount, onMounted } from 'vue';
import http from '@/io/http'; import http from '@/io/http';
import { message } from 'ant-design-vue'; import { showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { DateFormat } from '@/utils/format.js'; import { DateFormat } from '@/utils/format.js';
import AiAssistant from '@/views/chat/components/ai-assistant.vue'; // import AiAssistant from '@/views/chat/components/ai-assistant.vue';
import BackPage from '@/components/BackPage/index.vue'
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -110,7 +51,7 @@ const getCategories = () => {
http('/api/keywords', params, 'get').then(res => { http('/api/keywords', params, 'get').then(res => {
category.value = res.data.filter(v => v.id == cid.value)[0]; category.value = res.data.filter(v => v.id == cid.value)[0];
}).catch(err => { }).catch(err => {
message.error(err.message); showToast(err.message);
}); });
}; };
@ -118,7 +59,7 @@ const getDetail = ()=>{
http(`/api/article/${id.value}`, {}, 'get').then(res => { http(`/api/article/${id.value}`, {}, 'get').then(res => {
detail.value = res.data; detail.value = res.data;
}).catch(err => { }).catch(err => {
message.error(err.message); showToast(err.message);
}); });
}; };
@ -131,45 +72,13 @@ const goBack = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.pageContainer{ .pageContainer{
color: #FFF; color: #FFF;
width: 90rem; padding: 25px;
margin: 0 auto; background-color: #242527;
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;
}
}
.breadNav{ .breadNav{
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
color: #999; color: #999;
font-size: 22px;
span{ span{
padding: 0 5px; padding: 0 5px;
} }
@ -186,13 +95,15 @@ const goBack = () => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 14px; font-size: 24px;
} }
.article{ .article{
padding: 20px 0; padding: 20px 0;
.title{ .title{
font-size: 27px; font-size: 26px;
line-height: 30px; line-height: 30px;
font-weight: bold;
color: #FFF;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
} }
@ -201,6 +112,7 @@ const goBack = () => {
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
color: #999; color: #999;
font-size: 23px;
span{ span{
display: inline-block; display: inline-block;
margin: 10px; margin: 10px;
@ -208,6 +120,7 @@ const goBack = () => {
} }
.info{ .info{
line-height: 1.5; line-height: 1.5;
font-size: 23px;
:deep(p){ :deep(p){
padding: 10px 0; padding: 10px 0;
} }

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

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