You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<template> <div id="aCoursesList" class="bg-fa of"> <section class="container"> <section class="i-article"> <div class=" col-club" style="white-space: nowrap;"> <section style="background: linear-gradient(to right,bisque,sandybrown);height: 360px;margin-top: 60px;"> <div style="position: absolute;"> <img :src="imgUrl" alt="大图标" style="display: inline-block;margin-top: 20px; margin-left: 15px;width: 190px;"> <button style="background-color:peru; margin-top: 60px; margin-left: 750px; font-size: 23px;color:sienna;height: 35px; width: 115px;position: absolute;" > 查看更多</button> <p style="font-size: clamp(1rem, 2vw, 24px); margin-left: 45px;margin-right: 60px; font-weight: 500; margin-top: -10px;position: absolute;width: 100%; height: 100%;"> 博股国际投资论坛(Bogulnternational InvestmentForum)立足中国，面向全球。聚集了国际 政要、<br>投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高端投资人士提供深度学习， 解读<br>国际经济形势，并研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重 知识<br>体系的深度，与大师为伍，强调价值投资，并利用大波段进行盈利。 </p> </div> </section> <section class="mr30"> <header class="comm-title all-article-title"> <h2 class="fl tac"> <span class="c-333" style="color:cornflowerblue;text-decoration: underline;text-underline-offset: 9px;">专题</span> </h2> <section class="c-tab-title"> <a href="javascript: void(0)"> </a> </section> </header> <!-- /无数据提示 开始--> <!-- /无数据提示 结束--> <article class="i-article-list" style="background: linear-gradient(cornsilk,white); "> <!-- /文章列表 开始--> <div> <p style="font-size: 23px; margin-left: 40px; margin-bottom: 30px; display: inline-block;margin-top: 20px;" >前言股市投资分享之左侧交易</p> <p style="margin-left: 635px; font-size: 18px;margin-top: 20px;position: absolute;display: inline-block;" >查看更多</p> </div> <ul>
<li v-for="Subject in SubjectList" :key="Subject.id"> <aside class="i-article-pic" style="margin-left: 40px;"> <img :src="Subject.coverImg" :alt="1"> </aside> <img :src="imgjinUrl" alt="" width="35px" height="35px" style="margin-left: 30px; display: inline-block;"> <span class="hLh30 txtOf" style="margin-left: 10px; display: inline-block;"> <a :title="Subject.sectionTitle" href="/club/1" class="i-art-title">{{ Subject.sectionTitle }}</a> </span> <!-- <img style="margin-left: 40px;" src="/assets/img/jinbi.jpg"> -->
<section class="i-q-txt mt5 i-q-txt2" style="margin-left: 30px;"> <img :src="Subject.club" alt="" > </section> <section class="hLh30 txtOf mt5 pr10 a-list-extrainfo"> <div class="fl" style="margin-left: 30px;"> <img :src="Subject.head" alt="" style="display: inline-block; width: 20px; height: 20px;border-radius: 80px;" > <span class="c-999 f-fM">{{ Subject.author }}</span> <span class="c-999 f-fM">{{ Subject.publishTime }}</span> <span class="el-icon-view"> {{ Subject.viewCount }}</span> <!-- <span> <a class="noter-dy vam" title="回答" href="http://127.0.0.1:81/front/articleinfo/23.html"> <em class="icon18"> </em><span>{{ Subject.commentCount }}</span> </a> <tt title="赞一下" class="noter-zan vam ml10 f-fM" onclick="addPraise('23',3)"> <em class="icon18"> </em><span class="addPraise23_3 praiseCount">{{ Subject.likeCount }}</span> </tt> </span> -->
<span class="el-icon-chat-dot-square"> {{ Subject.commentCount }}</span> <span> <i :id="'like-count'+Subject.id" :style="{color: Subject.isLiked==0 ? '#f56c6c' : '#c0c4cc'}" class="el-icon-thumb " @click="praise(Subject.id,Subject.isLiked,index)" > {{ Subject.likeCount }}</i> <!-- <i v-if="recommendation.isLiked==0" class="el-icon-thumb"> {{ recommendation.likes }}</i> <i class="el-icon-thumb" style="color: aqua;"> {{ recommendation.likes }}</i> --> </span> </div> </section> </li> </ul> <!-- /文章列表 结束--> </article>
<!-- 公共分页 开始 --> <!-- <div> <div class="paging"> <a class="undisable" title>首</a> <a id="backpage" class="undisable" href="#" title><</a> <a href="#" title class="current undisable">1</a> <a href="#" title>2</a> <a id="nextpage" href="#" title>></a> <a href="#" title>末</a> <div class="clear"/> </div> </div> --> <!-- 公共分页 结束 -->
</section> </div>
</section></section></div></template><script>import indexApi from '~/api/club'import service from '../../utils/request'
export default {
async asyncData() { // 获取课程和讲师数据
const SubjectResponse = await indexApi.getSubject() const SubjectList = SubjectResponse.data const mainTitle = SubjectList.mainTitle // var time = recommendationList.publishTime
// var d = new Date(time)
// var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
return { SubjectList, mainTitle, imgjinUrl: require('@/assets/img/jin.jpg'), imgUrl: require('@/assets/img/da.jpg') // imgUrl: '/assets/img/1.jpg'
// currentMonth: new Date().getMonth() + 1
} }, methods: { praise(id, index) { service.post('special-topic/api/isLikedById/' + id) // .then(response => response.json())
.then(Response => { // console.log(id)
// console.log(status)
// console.log(response)
// window.location.reload()
// console.log(this.RecommendationResponse)
// console.log(id)
// document.getElementById(`like-count`).textContent = data.data.likes
// document.getElementById(`like-isLiked`).className = data.isLiked ? 'liked' : ''
service.post('special-topic/api/selectSpecialTopic') .then(Response => { const data = Response.data // console.log(data)
for (var i = 0; i < data.length; i++) { // console.log(data[i])
if (data[i].id === id) { console.log(data[i].id) // console.log(id)
document.getElementById(`like-count` + id).textContent = data[i].likeCount if (data[i].isLiked === 0) { // console.log(data[i].isLiked)
document.getElementById(`like-count` + id).style.color = '#f56c6c' } else { document.getElementById(`like-count` + id).style.color = '#c0c4cc' } } }
// const isLikd = data.isLiked
// document.getElementById(`like-count`).textContent = data.likes
// const i = document.getElementById(`like-count`)
// // '#f56c6c' : '#c0c4cc'
// if (isLikd) {
// i.style.color = '#f56c6c'
// } else {
// i.style.color = '#c0c4cc'
// }
// console.log(Response)
})
// console.log(data)
}) .catch(error => { console.log(error) console.log('error') }) }, formatDateTime(isoString) { const date = new Date(isoString) const month = (date.getMonth() + 1).toString().padStart(2, 0) const day = date.getDate().toString().padStart(2, 0) const hours = date.getHours().toString().padStart const minutes = date.getMinutes().toString().padStart(2, '0') return `${month}-${day} ${hours}:${minutes}` } }}
</script>
|
