Files
JiaZhiQianYan/pages/index/eventDetails/eventDetails.vue

1712 lines
39 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<navBar leftText="事件详情" :hideNavBg="true"></navBar>
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
<scroll-view v-if="eventDetails" scroll-y class="eventDetailsC fixed" :style="'top:'+navH+'px;'" @scrolltolower="loadMoreData()">
<view class="eventIntroC">
<view class="categoryTitleC">
<view class="category">{{eventDetails.event_type}}</view>
<text class="title" @longpress="copyEventTitle()">{{eventDetails.event_title}}</text>
</view>
<view class="eventTime">{{eventDetails.event_created_at.substr(0,16)}}</view>
<view class="eventContent">
<text user-select>{{eventDetails.event_desc}}<text class="ai">AI合成</text></text>
</view>
<view class="riskTips">
风险提示解析内容由价值前沿人工采集整理自新闻公告研报等公开信息团队辛苦编写未经许可严禁转载本产品内容内容均不构成投资建议请投资者注意风险独立审慎决策
</view>
</view>
<scroll-view scroll-x class="categoryList">
<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
{{item}}
<view v-if="selectCategory==index" class="line absolute"></view>
</view>
</scroll-view>
<view v-if="selectCategory==0" class="headingList flex">
<view class="item flex1" v-for="(item,index) in headingList" :key="index">
{{item}}
</view>
</view>
<view v-if="selectCategory==0" class="targetList">
<view class="item" v-for="(item,index) in targetList" :key="index" @click="clickStockItem(item.stock_code)">
<view class="nameCodePriceC flex">
<view class="flex1">
<view class="name">{{item.stock_name}}</view>
<view class="code">{{item.stock_code}}</view>
</view>
<view class="flex1">
<view style="width:140rpx; height:100rpx">
<l-echart :ref="'chartRef'+index"></l-echart>
</view>
</view>
<view class="price flex1">{{item.trade_data?item.trade_data.open_price:''}}</view>
<view class="price flex1">{{item.trade_data?item.trade_data.latest_price:''}}</view>
<view :class="'chg flex1 '+(getRateUpOrDown(item.trade_data?item.trade_data.change_pct:'')?'down':'up')">{{item.trade_data?item.trade_data.change_pct:''}}%</view>
</view>
<view class="content">{{item.relation_desc}}<text class="ai">AI合成</text></view>
</view>
</view>
<view v-if="selectCategory==1" class="conceptList">
<view class="conceptItem" v-for="(item,index) in conceptList" :key="index" @click="clickConceptItem(item.concept)">
<view class="titleChgStockNumC flex">
<view class="title">{{item.concept}}</view>
<view v-if="item.price_info" :class="'chg '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{getChgRateStr(item.price_info.avg_change_pct)}}%</view>
<view v-if="item.price_info" :class="'stockNum '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{item.stock_count}} 只股票</view>
</view>
<view class="content">{{item.description}}</view>
<view class="hotStockC flex">
<view class="title">热门个股</view>
<view v-if="memberInfo&&memberInfo.is_member&&memberInfo.subscription_type=='pro'" class="stockList flex">
<view class="stockItem" v-for="(sitem,sindex) in item.stocks.slice(0,3)" :key="sindex">{{sitem.name}}</view>
<view class="more" @click.stop="clickStockMore(item)">+{{item.stock_count-3}}更多</view>
</view>
<view v-else class="notVipC flex" @click.stop="clickNotVip()">
<image class="icon" src="/static/icon/home/conceptCenter/lock.png" mode="widthFix"></image>
<view>需升级Pro会员查看{{item.stock_count}}只个股</view>
</view>
</view>
<view class="transactionDateHistoryTimeC flex">
<view class="transactionDate flex1">交易时间{{item.price_info?item.price_info.trade_date:''}}</view>
<view class="historyTimeC flex" @click.stop="clickHistoricalTimeline(item)">
<image class="icon" src="/static/icon/home/conceptCenter/timeAxis.png" mode="widthFix"></image>
<view>历史时间轴</view>
</view>
</view>
</view>
</view>
<view v-if="selectCategory==2" class="historyEventList">
<view class="expectScoreC flex" @click="clickExpectScore($event)">
<image class="icon" src="/static/icon/home/expectScore.png" mode="widthFix"></image>
<view class="score flex1">超预期得分{{expectScore}}</view>
<image class="tips" src="/static/icon/home/expectScoreTips.png" mode="widthFix"></image>
</view>
<view class="list">
<view class="item flexStretch" v-for="(item,index) in historyEventList" :key="index">
<view class="eventLineC relative">
<view class="line"></view>
<image class="point absolute" src="/static/icon/home/expectScoreDot.png" mode="widthFix"></image>
</view>
<view class="eventInfoC flex1">
<view class="titleCorrelationC flex">
<view class="title flex1">{{item.title}}</view>
<view class="correlation">相关度: {{item.relevance*10}}%</view>
</view>
<view class="content">{{item.content}}</view>
<scroll-view scroll-x class="increaseRateList">
<view :class="'rateItem '+(getRateUpOrDown(item.related_avg_chg)?'down':'up')">
平均涨幅:
<image v-if="getRateUpOrDown(item.related_avg_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
{{getRateStr(item.related_avg_chg)}}%
</view>
<view :class="'rateItem '+(getRateUpOrDown(item.related_max_chg)?'down':'up')">
最大涨幅:
<image v-if="getRateUpOrDown(item.related_max_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
{{getRateStr(item.related_max_chg)}}%
</view>
</scroll-view>
<view class="relatedStockTimeC flex flex1">
<view class="relatedStockC flex" @click.stop="clickLookHistoricalEventRelatedStock(item)">
<image class="icon" src="/static/icon/home/expectScore.png" mode="widthFix"></image>
查看相关股票
</view>
<view class="time flex1">{{getLocaleTime(item.event_date)}}</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<view v-if="eventDetails" class="bottomC fixed flex">
<!-- <view class="inputC flex1">
<input type="text" v-model="eventComment" placeholder="我来说两句..." placeholder-style="color:#666" confirm-type="send" @confirm="sendEventComment()"/>
</view> -->
<!-- <view class="commentLikeNumC flex"> -->
<view class="item flexCenter flex1">
<image class="icon" src="/static/icon/home/eventDetails/like.png" mode="widthFix"></image>
<view>{{eventDetails.view_count}}</view>
</view>
<view class="item flexCenter flex1">
<image class="icon" src="/static/icon/home/eventDetails/comment.png" mode="widthFix"></image>
<view>{{eventDetails.post_count}}</view>
</view>
<view class="item flexCenter flex1" @click="clickFollow()">
<image class="icon" src="/static/icon/home/eventDetails/collect.png" mode="widthFix"></image>
<view>{{eventDetails.follower_count}}</view>
</view>
<!-- </view> -->
</view>
<uni-popup ref="popup" type="bottom">
<view class="popup">
<view class="titleCloseC flex">
<view class="title flex1">全部回复</view>
<view class="closeC" @click="closeCommentPopup()">
<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
</view>
</view>
<view class="list">
<view class="item" v-for="(item,index) in commentList" :key="index">
<view class="originComment">
<image class="avatar" :src="item.user.avatar_url" mode="aspectFill"></image>
<view class="flex1">
<view class="nickname">{{item.user.username}}</view>
<view class="content">{{item.content}}</view>
<view class="timeReplyLikeC flex between">
<view class="timeReplyC flex">
<view class="time">{{getLocaleHourMinute(item.created_at)}}</view>
<view class="reply" @click.stop="clickReplyComment(item.post_id)">回复</view>
</view>
<view class="likeC flex" @click.stop="clickLikeComment(item.post_id,index,-1)">
<image class="icon" src="/static/icon/home/like.png" mode="widthFix"></image>
<view class="num">{{item.likes_count}}</view>
</view>
</view>
<!-- <view class="totalCommentNumC flex">
<view class="line"></view>
全部34条评论
<image class="arrow" src="/static/icon/home/commentArrow.png" mode="widthFix"></image>
</view> -->
</view>
</view>
<!-- <view class="replyList">
<view class="replyItem">
<image class="avatar" src="" mode="aspectFill"></image>
<view class="flex1">
<view class="nickname">逸尘破晓</view>
<view class="content">四部门联合启动的人力资源服务业与制造业融合发展点主要目的是推动人力资源服务向高端制造渗透</view>
<view class="timeReplyLikeC flex between">
<view class="timeReplyC flex">
<view class="time">15:37</view>
<view class="reply">回复</view>
</view>
<view class="likeC flex" @click.stop="clickLikeComment(item.post_id)">
<image class="icon" src="/static/icon/home/like.png" mode="widthFix"></image>
<view class="num">85</view>
</view>
</view>
</view>
</view>
</view> -->
</view>
</view>
<view class="popBottomC">
<view class="inputC">
<input type="text" v-model="replyComment" :focus="isFocus" placeholder="我来说两句..." placeholder-style="color:#666" confirm-type="send" @confirm="sendReplyComment()"/>
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="expectScorePopup" type="top" mask-background-color="transparent" :animation="false">
<view class="expectScorePopup relative" :style="'margin-top:'+scoreTop+'px;'">
<image class="arrow absolute" src="/static/icon/home/sortArrow.png" mode="widthFix"></image>
<view class="tips">
超预期得分:基于历史事件判断当前事件的超预期情况满分100分得分越高越超预期
</view>
</view>
</uni-popup>
<uni-popup ref="stockPopup" type="bottom">
<view class="stockPopup">
<view class="titleCloseC flex">
<view class="title flex1">相关股票</view>
<view class="closeC" @click="closeRelatedStockPopup()">
<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
</view>
</view>
<view class="list">
<view class="item" v-for="(item,index) in historyEventRelatedStockList" :key="index" @click="clickStockItem(item.stock_code)">
<view class="titleCorrelationC flex">
<view class="title flex1">{{item.stock_name+'('+item.stock_code+')'}}</view>
<view class="correlation">相关度: {{item.correlation*100}}%</view>
</view>
<view class="sectorRateC">
<view class="sector">{{item.sector}}</view>
<view :class="'rateC '+(getRateUpOrDown(item.daily_change)?'down':'up')">
当日涨幅:
<image v-if="getRateUpOrDown(item.daily_change)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
{{getRateStr(item.daily_change)}}%
</view>
</view>
<view class="content">{{item.relation_desc}}</view>
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="vipPopup" type="center">
<view class="vipPopup">
<image class="topIcon" src="/static/icon/home/conceptCenter/vipPopIcon.png" mode="widthFix"></image>
<view class="popTitle">需要Pro版订阅</view>
<view class="popSubtitle">当前功能需要更高权限</view>
<view class="moduleC visit">
<view class="section">您正在尝试访问</view>
<view class="visitC relative">
<view class="line absolute"></view>
<view class="contentC relative flex">
<image class="icon" src="/static/icon/home/conceptCenter/visitModule.png" mode="widthFix"></image>
<view>概念统计中心和热门个股</view>
</view>
</view>
</view>
<view class="moduleC">
<view class="section flex">
当前订阅
<view class="version free">免费版</view>
</view>
<view class="list">
<view class="item flex">
<image class="icon" src="/static/icon/home/conceptCenter/free_s.png" mode="widthFix"></image>
<view>基础事件浏览</view>
</view>
<view class="item flex">
<image class="icon" src="/static/icon/home/conceptCenter/free_s.png" mode="widthFix"></image>
<view>有限历史事件查看</view>
</view>
</view>
</view>
<view class="moduleC">
<view class="section flex">
所需订阅
<view class="version pro">Pro版</view>
</view>
<view class="list">
<view class="item flex">
<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
<view>相关标的分析</view>
</view>
<view class="item flex">
<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
<view>相关概念分析</view>
</view>
<view class="item flex">
<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
<view>完整历史事件</view>
</view>
</view>
</view>
<view class="btnC flex">
<view class="btn flex1 later" @click="clickLater()">稍后再说</view>
<view class="btn flex1 upgrade" @click="clickUpgradeAtOnce()">立即升级</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { inject } from 'vue';
import { eventRelatedConcept, eventHistoryEvent, eventRelatedStock, eventCommentList, commentEvent, likeEventComment, replyComment, followEvent, membershipStatus } from '@/request/api';
import { getLocaleHourMinute, getLocaleTime, getRateStr, getRateUpOrDown, getChgRateStr } from '@/utils/util';
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
export default {
data() {
return {
navH:inject('navHeight'),
windowWidth:inject('windowWidth'),
eventId:'', //事件id
memberInfo:null, //会员信息
eventDetails:null, //事件详情
categoryList:['相关标的','相关概念','历史事件'],
targetList:[], //相关标的
conceptList:[], //相关概念
page:1,
loadAll:false, //是否加载完毕
historyEventList:[], //历史事件
historyEventRelatedStockList:[], //历史事件相关股票
selectCategory:0,
headingList:['名称代码','分时图','开盘价','最新价','涨跌幅'],
getLocaleHourMinute:getLocaleHourMinute,
getLocaleTime:getLocaleTime,
getRateUpOrDown:getRateUpOrDown,
getRateStr:getRateStr,
getChgRateStr:getChgRateStr,
scoreTop:'',
expectScore:0, //预期得分
commentList:[], //评价列表
eventComment:'', //事件评论内容
replyId:'', //回复评论id
replyPid:'', //回复评论父级id
isFocus:false, //是否获取焦点
replyComment:'', //评论回复内容
option:{
tooltip: {
show:false,
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
confine: true
},
grid:{
left: '10%',
right: '6%',
top: '5%',
bottom: '10%',
},
xAxis:{
type: 'category',
scale:true,
data: [],
// axisTick:{ show:false },
axisLine:{ show:false },
axisLabel:{ show:false }
},
yAxis: [
{
type: 'value',
axisTick: { show:false },
scale:true,
axisLabel: { show:false },
splitLine: { show:false }
}
],
series: {
name: '分时图',
type: 'line',
label: {
show:true,
position:'top',
fontSize:12,
},
symbol:'none',
silent:true,
data: [],
itemStyle:{
color:''
},
markLine:{
symbol:['none','none'],
lineStyle:{
color:'#AAAAAA',
type:'dashed'
},
data:[]
}
}
},
}
},
onLoad(e)
{
if(e.id)
{
this.eventId = e.id
this.getEventRelatedStockData()
this.getEventCommentListData()
}
},
methods: {
/**
* 复制标题
*/
copyEventTitle() {
uni.setClipboardData({
data:this.eventDetails.event_title,
success() {
uni.showToast({
title:'复制成功'
})
}
})
},
async init() {
// chart 图表实例不能存在data里
let that = this
setTimeout(function() {
that.targetList.map(function(item,index) {
const chartDom = that.$refs['chartRef'+index][0]
chartDom.init(echarts).then(res=>{
let option = {...that.option}
let categoryData = []
let valueData = []
for (let item1 of item.minute_chart_data) {
categoryData.push(item1.time)
valueData.push(item1.close)
}
option.series.data = valueData
option.xAxis.data = categoryData
let time = that.eventDetails.event_start_time.split('T')[1]
time = time.substring(0,5)
let firstOpen = item.minute_chart_data[0].open
option.series.markLine.data = [
{
xAxis:time,
lineStyle:
{
type:'solid',
width: 1,
color: '#ffd700'
},
},
{
yAxis:firstOpen,
}]
let lastClose = item.minute_chart_data.slice(-1)[0].close
if(lastClose>=firstOpen)
{
option.series.itemStyle.color = '#EF5350'
}else
option.series.itemStyle.color = '#26A69A'
res.setOption(option)
})
})
}, 300);
},
loadMoreData() {
if (this.selectCategory==1) {
if (!this.loadAll) {
this.page ++
this.getEventRelatedConceptData()
}
}
},
/**
* 点击切换分类
*/
clickCategoryItem(index)
{
if(this.selectCategory!=index)
{
this.selectCategory = index
if(index==0)
{
//相关标的
this.getEventRelatedStockData()
}else if(index==1)
{
//相关概念
this.page = 1
this.loadAll = false
this.getEventRelatedConceptData()
}else if(index==2)
{
//历史事件
this.getEventHistoryEventData()
}
}
},
/**
* 点击查看股票详情
*/
clickStockItem(code)
{
uni.navigateTo({
url:'/pages/index/stockDetails/stockDetails?type=1&code='+code+'&id='+this.eventId
})
},
/**
* 点击查看相关概念
*/
clickConceptItem(name)
{
uni.navigateTo({
url:'/pages/index/conceptDetails/conceptDetails?name='+name
})
},
/**
* 非vip点击
*/
clickNotVip()
{
this.$refs["vipPopup"].open()
},
/**
* 点击稍后再说
*/
clickLater()
{
this.$refs["vipPopup"].close()
},
/**
* 点击立即升级
*/
clickUpgradeAtOnce()
{
this.clickLater()
},
/**
* 点击查看更多个股
*/
clickStockMore(item)
{
uni.navigateTo({
url:'/pages/concept/hotStock/hotStock?id='+item.concept_id
})
},
/**
* 点击查看历史时间轴
*/
clickHistoricalTimeline(item)
{
uni.navigateTo({
url:'/pages/concept/historicalTimeline/historicalTimeline?id='+item.concept_id
})
},
/**
* 点击查看历史事件的相关股票
*/
clickLookHistoricalEventRelatedStock(item)
{
this.historyEventRelatedStockList = item.related_stocks
this.$refs['stockPopup'].open()
},
/**
* 点击关闭相关股票弹窗
*/
closeRelatedStockPopup()
{
this.$refs['stockPopup'].close()
},
/**
* 点击查看超预期得分
*/
clickExpectScore(e)
{
this.scoreTop = e.currentTarget.offsetTop+this.navH+(70+10)/750*this.windowWidth
this.$refs['expectScorePopup'].open()
},
/**
* 点击发送事件评论
*/
sendEventComment()
{
if(!this.eventComment)
{
uni.showToast({
title:'请输入评论内容',
icon:'none'
})
return
}
let eventId = this.eventId
let param = {content:this.eventComment}
commentEvent(eventId,param).then(res=>{
uni.showToast({
title:res.message,
icon:'none'
})
let that = this
setTimeout(function() {
that.getEventCommentListData()
}, 1000);
}).catch(error=>{
})
},
/**
* 点击评论
*/
clickComment()
{
this.$refs['popup'].open()
},
/**
* 点击关闭评论弹窗
*/
closeCommentPopup()
{
this.$refs['popup'].close()
},
/**
* 点击关注
*/
clickFollow()
{
let eventId = this.eventId
followEvent(eventId).then(res=>{
uni.showToast({
title:res.message,
icon:'none'
})
uni.$emit('editSuccess')
this.getEventRelatedStockData()
}).catch(error=>{
})
},
/**
* 点击回复评论
*/
clickReplyComment(id,pid)
{
this.replyId = id
if(pid)
{
this.replyPid = pid
}
this.isFocus = true
},
sendReplyComment()
{
if(!this.replyComment)
{
uni.showToast({
title:'请输入评论内容',
icon:'none'
})
return
}
let param = {content:this.replyComment}
if(this.replyPid)
{
param.parent_id = this.replyPid
}
replyComment(this.replyId,param).then(res=>{
}).catch(error=>{
})
},
/**
* 点赞评论
*/
clickLikeComment(id,index,cindex)
{
likeEventComment(id).then(res=>{
uni.showToast({
title:res.message,
icon:'none'
})
if(cindex==-1)
{
//一级评论回复
this.commentList[index].likes_count = res.likes_count
}else
{
}
}).catch(error=>{
})
},
/**
* 获取事件相关标的数据
*/
getEventRelatedStockData()
{
let eventId = this.eventId
eventRelatedStock(eventId).then(res=>{
if(res.code==200)
{
this.eventDetails = res.data
this.targetList = res.data.related_stocks
this.init()
}else
uni.showToast({
title:res.message,
icon:'none',
duration:3000
})
}).catch(error=>{
})
},
/**
* 获取事件相关概念数据
*/
getEventRelatedConceptData()
{
let eventDetails = this.eventDetails
let param = {query:eventDetails.event_title,size:10,page:this.page,sort_by:"_score",isJson:1}
eventRelatedConcept(param).then(res=>{
if (res.page == 1) {
this.conceptList = res.results
}else {
this.conceptList = this.conceptList.concat(res.results)
}
if (res.page==res.total_pages) {
this.loadAll = true
}
}).catch(error=>{
})
},
/**
* 获取事件历史事件数据
*/
getEventHistoryEventData()
{
let eventId = this.eventId
eventHistoryEvent(eventId).then(res=>{
if(res.code==200)
{
this.expectScore = res.data.invest_score
this.historyEventList = res.data.historical_events
}else
uni.showToast({
title:res.message,
icon:'none'
})
}).catch(error=>{
})
},
/**
* 获取事件评论列表
*/
getEventCommentListData()
{
let eventId = this.eventId
eventCommentList(eventId).then(res=>{
this.commentList = res.data.posts
}).catch(error=>{
})
}
}
}
</script>
<style lang="less">
page
{
background-color: #070707;
}
.topBg
{
top: 0;
left: 0;
width: 100%;
height: auto;
}
.eventDetailsC
{
margin-top: 10rpx;
padding: 20rpx 25rpx 0;
left: 0;
right: 0;
bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));
border-radius: 20rpx 20rpx 0 0;
overflow-y: scroll;
.eventIntroC
{
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
padding: 26rpx 0 34rpx;
border-radius: 10rpx;
.categoryTitleC
{
padding: 0 25rpx;
.category
{
background-color: #F3C368;
margin-right: 8rpx;
display: inline-block;
padding: 0 11rpx;
line-height: 40rpx;
border-radius: 8rpx;
font-size: 22rpx;
font-weight: bold;
color: white;
}
.title
{
font-size: 30rpx;
font-weight: bold;
color: #222;
line-height: 1.1rem;
}
}
.eventTime
{
margin: 20rpx 25rpx 0;
font-size: 22rpx;
font-weight: 500;
color: #666;
}
.eventContent
{
margin: 18rpx 27rpx 0;
word-break: break-all;
font-size: 24rpx;
font-weight: 500;
color: #71675D;
line-height: 1.3rem;
.ai
{
color: #EC3440;
}
}
.riskTips
{
margin: 24rpx 25rpx 0;
line-height: 1.2rem;
font-size: 22rpx;
font-weight: 500;
color: #A2A2A1;
}
}
.categoryList
{
white-space: nowrap;
.item
{
display: inline-block;
line-height: 80rpx;
padding: 0 18rpx;
font-size: 27rpx;
font-weight: 500;
color: #939393;
}
.item.select
{
font-weight: bold;
color: #F3C368;
}
}
.headingList
{
background-color: #FFF1E7;
padding: 0 10rpx;
border-radius: 10rpx 10rpx 0 0;
.item
{
line-height: 70rpx;
font-size: 24rpx;
font-weight: 500;
color: #070707;
text-align: center;
}
}
.targetList
{
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
padding: 0 25rpx;
.item
{
padding-bottom: 20rpx;
border-bottom: solid 1rpx #E4E4E4;
.nameCodePriceC
{
padding: 20rpx 0;
font-size: 28rpx;
font-weight: bold;
color: #222;
.code
{
font-size: 20rpx;
font-weight: 500;
color: #888;
}
.price
{
text-align: center;
}
.chg
{
text-align: right;
}
.chg.up
{
color: #FF2929;
}
.chg.down
{
color: #355422;
}
}
.content
{
font-size: 20rpx;
font-weight: 500;
color: #71675D;
line-height: 1.2rem;
.ai
{
color: #CCCDD1;
}
}
}
}
.conceptList
{
.conceptItem
{
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
margin-bottom: 20rpx;
border-radius: 10rpx;
.titleChgStockNumC
{
padding: 24rpx 18rpx 0;
.title
{
margin-right: 20rpx;
font-size: 30rpx;
font-weight: bold;
color: #3D3D3D;
}
.chg
{
margin-right: 20rpx;
padding: 0 13rpx;
line-height: 40rpx;
border-radius: 20rpx;
font-size: 22rpx;
font-weight: bold;
color: white;
}
.chg.up
{
background-color: #EC3440;
}
.chg.down
{
background-color: #355422;
}
.stockNum
{
flex-shrink: 0;
padding: 0 16rpx;
line-height: 36rpx;
border-radius: 20rpx;
font-size: 22rpx;
font-weight: bold;
}
.stockNum.up
{
color: #EC3440;
border: solid 2rpx #EC3440;
}
.stockNum.down
{
color: #355422;
border: solid 2rpx #355422;
}
}
.content
{
margin-top: 26rpx;
padding: 0 22rpx;
font-size: 24rpx;
font-weight: 500;
color: #71675D;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.hotStockC
{
margin-top: 30rpx;
padding: 0 20rpx;
.title
{
margin-right: 10rpx;
font-size: 24rpx;
font-weight: bold;
color: #936E5C;
}
.stockList
{
font-size: 22rpx;
.stockItem
{
background-color: #3D3D3D;
margin-right: 10rpx;
padding: 0 8rpx;
line-height: 36rpx;
border-radius: 5rpx 20rpx 5rpx 20rpx;
color: #EFDDD1;
}
.more
{
color: #936E5C;
line-height: 36rpx;
}
}
.notVipC
{
background-color: #3D3D3D;
padding: 0 21rpx 0 16rpx;
line-height: 36rpx;
border-radius: 5rpx;
font-size: 22rpx;
color: #F3C368;
.icon
{
margin-right: 9rpx;
width: 15rpx;
height: auto;
}
}
}
.transactionDateHistoryTimeC
{
padding: 20rpx 22rpx 30rpx;
.transactionDate
{
font-size: 20rpx;
font-weight: 500;
color: #666;
}
.historyTimeC
{
background-color: #F3C368;
padding: 0 10rpx 0 15rpx;
line-height: 36rpx;
border-radius: 10rpx;
font-size: 22rpx;
font-weight: 500;
color: #101213;
.icon
{
margin-right: 7rpx;
width: 20rpx;
height: auto;
}
}
}
}
}
.historyEventList
{
padding: 20rpx 0;
.expectScoreC
{
padding: 0 20rpx;
height: 70rpx;
.icon
{
margin-right: 14rpx;
width: 24rpx;
height: auto;
}
.score
{
font-size: 24rpx;
font-weight: 500;
color: #FFF6F0;
}
.tips
{
margin-left: 14rpx;
width: 24rpx;
height: auto;
}
}
.list
{
.item
{
.eventLineC
{
padding: 30rpx 34rpx 0 25rpx;
.line
{
width: 1rpx;
border-left: dashed 1rpx #F3C368;
height: calc(100% - 10rpx);
}
.point
{
top: 0;
left: 14rpx;
width: 20rpx;
height: auto;
}
}
.eventInfoC
{
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
margin-bottom: 20rpx;
padding-top: 27rpx;
min-width: 0;
border-radius: 10rpx;
.titleCorrelationC
{
padding: 0 24rpx 0 30rpx;
.title
{
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 28rpx;
font-weight: bold;
color: #222;
}
.correlation
{
background-color: #FFF8EB;
padding: 0 12rpx;
line-height: 40rpx;
border-radius: 5rpx;
font-size: 22rpx;
font-weight: 500;
color: #EFB342;
}
}
.content
{
margin: 16rpx 30rpx 0;
font-size: 24rpx;
font-weight: 500;
color: #666;
.ai
{
color: #C00000;
}
}
.increaseRateList
{
white-space: nowrap;
padding: 0 30rpx;
margin-top: 24rpx;
.rateItem
{
display: inline-block;
margin-right: 15rpx;
line-height: 44rpx;
padding: 0 14rpx;
border-radius: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: white;
.arrow
{
width: 15rpx;
height: auto;
}
}
.rateItem.up
{
background-color: #EC3440;
}
.rateItem.down
{
background-color: #355422;
}
}
.relatedStockTimeC
{
padding-right: 28rpx;
.relatedStockC
{
padding: 16rpx 30rpx;
font-size: 24rpx;
font-weight: bold;
color: #070707;
.icon
{
margin-right: 13rpx;
width: 24rpx;
height: auto;
}
}
.time
{
font-size: 22rpx;
font-weight: 500;
color: #aaa;
text-align: right;
}
}
}
}
}
}
}
.bottomC
{
background-color: #131313;
padding: 20rpx 25rpx calc(20rpx + env(safe-area-inset-bottom));
left: 0;
right: 0;
bottom: 0;
.inputC
{
background-color:#424143;
margin-right: 20rpx;
padding: 0 33rpx;
height: 70rpx;
border-radius: 35rpx;
input
{
height: 100%;
font-size: 26rpx;
font-weight: 500;
}
}
// .commentLikeNumC
// {
.item
{
font-size: 30rpx;
font-weight: bold;
color: #bdbdbd;
text-align: center;
.icon
{
margin: 0 20rpx;
width: 40rpx;
height: auto;
}
}
// }
}
.popup
{
background-color: white;
.titleCloseC
{
padding-left: 25rpx;
font-size: 32rpx;
font-weight: bold;
color: #222;
.closeC
{
padding: 28rpx;
.icon
{
width: 28rpx;
height: auto;
}
}
}
.list
{
margin: 0 25rpx;
border-top: solid 1rpx #E4E4E4;
max-height: 1200rpx;
.item
{
padding-top: 30rpx;
border-bottom: solid 1rpx #E4E4E4;
.originComment
{
display: flex;
.avatar
{
margin-right: 23rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.nickname
{
font-size: 28rpx;
font-weight: bold;
color: #111;
}
.content
{
margin-top: 10rpx;
line-height: 1.2rem;
font-size: 24rpx;
font-weight: 500;
color: #666;
}
.timeReplyLikeC
{
.time
{
margin-right: 36rpx;
font-size: 26rpx;
font-weight: 500;
color: #aaa;
}
.reply
{
font-size: 26rpx;
font-weight: 500;
color: #F97316;
}
.likeC
{
padding: 14rpx 0;
font-size: 28rpx;
font-weight: bold;
color: #999;
.icon
{
margin-right: 12rpx;
width: 27rpx;
height: auto;
}
}
.likeC.like
{
color: #F97316;
}
}
.totalCommentNumC
{
padding: 14rpx 0 22rpx;
font-size: 26rpx;
font-weight: 500;
color: #999;
.line
{
background-color: #aaa;
margin-right: 18rpx;
width: 30rpx;
height: 2rpx;
}
.arrow
{
margin-left: 14rpx;
width: 13rpx;
height: auto;
}
}
}
.replyList
{
margin-left: 60rpx;
border-top: solid 1rpx #E4E4E4;
.replyItem
{
display: flex;
padding: 22rpx 0;
border-bottom: solid 1rpx #E4E4E4;
.avatar
{
margin-right: 23rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.nickname
{
font-size: 28rpx;
font-weight: bold;
color: #111;
}
.content
{
margin-top: 10rpx;
line-height: 1.2rem;
font-size: 24rpx;
font-weight: 500;
color: #666;
}
.timeReplyLikeC
{
.time
{
margin-right: 36rpx;
font-size: 26rpx;
font-weight: 500;
color: #aaa;
}
.reply
{
font-size: 26rpx;
font-weight: 500;
color: #F97316;
}
.likeC
{
padding: 14rpx 0;
font-size: 28rpx;
font-weight: bold;
color: #999;
.icon
{
margin-right: 12rpx;
width: 27rpx;
height: auto;
}
}
.likeC.like
{
color: #F97316;
}
}
}
.replyItem:last-child
{
border: none;
}
}
}
}
.popBottomC
{
padding: 22rpx 25rpx calc(22rpx + env(safe-area-inset-bottom));
.inputC
{
background-color: #F0F0F0;
padding: 0 33rpx;
height: 70rpx;
border-radius: 35rpx;
input
{
height: 100%;
font-size: 26rpx;
font-weight: 500;
color: #333;
}
}
}
}
.expectScorePopup
{
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
margin-left: calc(100% - 320rpx - 24rpx);
width: 320rpx;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
.arrow
{
top: -13rpx;
right: 38rpx;
width: 26rpx;
height: auto;
}
.tips
{
padding: 30rpx 22rpx 20rpx;
font-size: 22rpx;
font-weight: 500;
color: #444;
}
}
.stockPopup
{
background-color: white;
border-radius: 20rpx 20rpx 0 0;
.titleCloseC
{
padding-left: 25rpx;
font-size: 32rpx;
font-weight: bold;
color: #222;
.closeC
{
padding: 28rpx;
.icon
{
width: 28rpx;
height: auto;
}
}
}
.list
{
border-top: solid 1rpx #E4E4E4;
margin: 0 25rpx;
max-height: 800rpx;
overflow-y: scroll;
.item
{
padding: 36rpx 0 28rpx;
border-bottom: solid 1rpx #E4E4E4;
.titleCorrelationC
{
.title
{
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.correlation
{
background-color: #F3C368;
padding: 0 12rpx;
line-height: 40rpx;
border-radius: 5rpx;
font-size: 24rpx;
font-weight: 500;
color: #101213;
}
}
.sectorRateC
{
.sector
{
display: inline-block;
margin-right: 20rpx;
padding: 0 11rpx;
line-height: 30rpx;
border-radius: 5rpx;
border: solid 0.5px #F6604A;
font-size: 20rpx;
font-weight: 500;
color: #F6604A;
}
.rateC
{
display: inline-block;
padding: 0 10rpx;
height: 30rpx;
border-radius: 5rpx;
font-size: 20rpx;
font-weight: 500;
color: white;
.arrow
{
width: 15rpx;
height: auto;
}
}
.rateC.up
{
background-color: #C00000;
}
.rateC.down
{
background-color: #355422;
}
}
.content
{
margin-top: 16rpx;
font-size: 24rpx;
font-weight: 500;
color: #666;
.ai
{
color: #C00000;
}
}
}
}
}
.vipPopup
{
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
margin: 0 95rpx;
padding-bottom: 34rpx;
width: 560rpx;
border-radius: 10rpx;
.topIcon
{
margin: -60rpx 0 0 calc((100% - 143rpx)/2);
width: 143rpx;
height: auto;
}
.popTitle
{
margin-top: 28rpx;
font-size: 40rpx;
font-weight: bold;
color: #101213;
text-align: center;
}
.popSubtitle
{
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 500;
color: #493F2B;
text-align: center;
}
.moduleC
{
background-color: white;
margin: 0 30rpx 20rpx;
padding-top: 25rpx;
border-radius: 10rpx;
.section
{
padding: 0 25rpx;
font-size: 26rpx;
font-weight: bold;
color: #333;
.version
{
margin-left: 18rpx;
padding: 0 15rpx;
line-height: 32rpx;
border-radius: 10rpx;
font-size: 22rpx;
}
.version.free
{
background-color: #3D3D3D;
color: #FEFCFB;
}
.version.pro
{
background-color: #F2C367;
color: #3D3D3D;
}
}
.visitC
{
margin: 18rpx 24rpx 0;
height: 60rpx;
.line
{
background-color: #F2C367;
top: 0;
left: 0;
width: 44rpx;
height: 100%;
border-radius: 7rpx 0 0 7rpx;
}
.contentC
{
background-color: #F7F7F7;
margin-left: 6rpx;
padding: 0 15rpx;
height: 100%;
border-radius: 10rpx;
font-size: 24rpx;
font-weight: 500;
color: #3D3D3D;
.icon
{
margin-right: 14rpx;
width: 25rpx;
height: auto;
}
}
}
.list
{
padding-bottom: 10rpx;
.item
{
padding: 10rpx 25rpx;
font-size: 24rpx;
font-weight: 500;
color: #333;
.icon
{
margin-right: 13rpx;
width: 27rpx;
height: auto;
}
}
}
}
.moduleC.visit
{
margin-top: 20rpx;
padding-bottom: 25rpx;
}
.btnC
{
margin: 28rpx 92rpx 0;
.btn
{
line-height: 60rpx;
border-radius: 10rpx;
font-size: 24rpx;
font-weight: bold;
text-align: center;
}
.btn.later
{
background-color: #EDEDED;
margin-right: 56rpx;
}
.btn.upgrade
{
background-color: #F2C367;
}
}
}
</style>