longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

12.12 页面风格改版，增加事件详情相关概念网页跳转，增加绑定手机号功能

Browse Source
This commit is contained in:
尚政杰
2025-12-12 19:35:08 +08:00
parent 44842120da
commit 13c783a0ad
256 changed files with 4046 additions and 2986 deletions
Download Patch File Download Diff File Expand all files Collapse all files

528
pages/invest/invest.vue
View File

@@ -1,15 +1,13 @@
<template>
<view>
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">投资</view>
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
<navBar leftText="投资日历" :hideNavBg="true" :hideBack="true"></navBar>
<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
<image class="icon" src="/static/icon/home/search.png" mode="widthFix"></image>
<input class="flex1" type="text" v-model="keywords" placeholder="搜索话题/股票名称" placeholder-style="color:#94989A"/>
<view class="line"></view>
<view class="search" @click="clickSearch()">搜索</view>
<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
<input class="flex1" type="text" v-model="keywords" placeholder="搜索股票/话题..." placeholder-style="color:#94989A"/>
</view>
<scroll-view scroll-y class="contentC fixed" :style="'top:'+contentTop+'px;'" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="pullDownRefresh()" @scrolltolower="loadMoreData()">
<view>
<view class="calendarC">
<view class="todayC flex" >
<view class="todayDateC flex" @click="clickSelectMonth()">
<view class="date">{{selectDate}}</view>
@@ -22,44 +20,60 @@
<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
</view>
<view v-if="isExpand" class="monthDateList flexWrap">
<view class="item flexColumnCenter" v-for="(item,index) in monthDateList" :key="index" @click="clickSelectDate(item)">
<block v-if="selectDate!=todayDate">
<view v-if="selectDate==item.date" class="date today">{{item.day}}</view>
<view v-else :class="'date '+(item.isCurrentMonth?'':' notCurrentMonth')">{{item.day}}</view>
</block>
<block v-else>
<view :class="'date '+(item.isToday?'today':(item.isCurrentMonth?'':' notCurrentMonth')) ">{{item.day}}</view>
</block>
<block v-for="(item,index) in monthDateList" :key="index">
<block v-if="item.className">
<view v-if="item.className=='bg-gradient-danger'" class="eventNum danger">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-warning'" class="eventNum warning">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-info'" class="eventNum info">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-success'" class="eventNum success">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-danger'" :class="'item flexColumnCenter danger '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
<view v-if="item.className=='bg-gradient-warning'" :class="'item flexColumnCenter warning '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
<view v-if="item.className=='bg-gradient-info'" :class="'item flexColumnCenter info '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
<view v-if="item.className=='bg-gradient-success'" :class="'item flexColumnCenter success'+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
</block>
<block v-else>
<view class="eventNum"></view>
<view class="item flexColumnCenter">
<view :class="'date '+(item.isCurrentMonth?'':' notCurrentMonth')">{{item.day}}</view>
<view class="eventNum"></view>
</view>
</block>
</view>
</block>
</view>
<view v-else class="weekDateList flex">
<view class="item flex1 flexColumnCenter" v-for="(item,index) in weekDateList" @click="clickSelectDate(item)" :key="index">
<block v-if="selectDate!=todayDate">
<view v-if="selectDate==item.date" class="date today">{{item.day}}</view>
<view v-else :class="'date '+(item.isCurrentMonth?'':' notCurrentMonth')">{{item.day}}</view>
</block>
<block v-else>
<view :class="'date '+(item.isToday?'today':(item.isCurrentMonth?'':' notCurrentMonth')) ">{{item.day}}</view>
</block>
<block v-for="(item,index) in weekDateList" :key="index">
<block v-if="item.className">
<view v-if="item.className=='bg-gradient-danger'" class="eventNum danger">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-warning'" class="eventNum warning">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-info'" class="eventNum info">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-success'" class="eventNum success">{{item.eventCount}}</view>
<view v-if="item.className=='bg-gradient-danger'" :class="'item flex1 flexColumnCenter danger '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
<view v-if="item.className=='bg-gradient-warning'" :class="'item flex1 flexColumnCenter warning '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
<view v-if="item.className=='bg-gradient-info'" :class="'item flex1 flexColumnCenter info '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
<view v-if="item.className=='bg-gradient-success'" :class="'item flex1 flexColumnCenter success '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.eventCount}}</view>
</view>
</block>
<block v-else>
<view class="eventNum"></view>
<view class="item flex1 flexColumnCenter" @click="clickSelectDate(item)">
<view class="date">{{item.day}}</view>
<view class="eventNum">{{item.className?item.eventCount:''}}</view>
</view>
</block>
</view>
</block>
</view>
<view class="expandBgC flexCenter">
<view class="expandC flex" @click="clickExpandOrRetract()">
@@ -80,30 +94,32 @@
</scroll-view>
<view v-if="selectTab==0" class="eventList">
<view class="item" v-for="(item,index) in eventList" :key="index" @click="clickEventItem(item.id)">
<view class="flex">
<view class="time flex1">{{getLocaleHourMinute(item.start_time)}}</view>
<view class="timeStarFollowC flex">
<view class="time">{{getLocaleHourMinute(item.start_time)}}</view>
<view class="starC">
<view class="starList flex" >
<image class="icon" :src="(sindex<(item.category.star_rating)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
</view>
</view>
<view class="flex1"></view>
<!-- <view class="follow">+关注</view> -->
</view>
<view class="categoryTitleC flex">
<view class="category">{{item.category.event_type}}</view>
<view class="title flex1">{{item.title}}</view>
</view>
<scroll-view scroll-x class="labelC">
<!-- <scroll-view scroll-x class="labelC">
<view class="label" v-for="(titem,tindex) in item.tags" :key="tindex">
{{titem}}
</view>
</scroll-view>
</scroll-view> -->
<view class="content">
<ua-markdown :source="replaceAnswerLabel(item.description)" />
</view>
<scroll-view v-if="item.related_concepts" scroll-x class="percentList">
<view class="percentItem" v-for="(citem,cindex) in item.related_concepts" :key="cindex">
{{citem.name}}
<zui-progress-circle :position="citem.score" :range="[270,630]" :size="26" :ring-width="2" :texture="['#F97316','#E3E3E3']">
<zui-progress-circle :position="citem.score" :range="[270,630]" :size="26" :ring-width="2" :texture="['#F3C368','#E3E3E3']">
<view class="num">{{citem.score*100}}%</view>
</zui-progress-circle>
</view>
@@ -566,6 +582,10 @@
</script>
<style lang="less">
page
{
background-color: #070707;
}
.topBg
{
top: 0;
@@ -573,24 +593,17 @@
width: 100%;
height: auto;
}
.navTitle
{
left: 0;
margin: 0 23rpx;
font-size: 36rpx;
font-weight: bold;
color: white;
}
.searchC
{
background-color: white;
background-color: #292929B3;
left: 0;
right: 0;
margin: 20rpx 25rpx 0;
padding: 0 20rpx;
height: 75rpx;
border-radius: 20rpx;
font-size: 26rpx;
padding: 0 25rpx;
height: 70rpx;
border: solid 1rpx #363636;
border-radius: 35rpx;
font-size: 22rpx;
font-weight: 500;
.icon
{
@@ -616,191 +629,248 @@
}
.contentC
{
background-color: white;
left: 0;
right: 0;
bottom: calc(55px + env(safe-area-inset-bottom));
margin-top: 22rpx;
border-radius: 20rpx 20rpx 0 0;
margin-top: 20rpx;
overflow-y: scroll;
.todayC
.calendarC
{
padding: 12rpx 26rpx;
.todayDateC
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
margin: 0 25rpx;
border-radius: 20rpx;
.todayC
{
font-size: 32rpx;
font-weight: bold;
color: #222;
.icon
padding: 12rpx 26rpx;
.todayDateC
{
margin-left: 16rpx;
width: 30rpx;
height: auto;
}
}
.today
{
background-color: #F973161A;
width: 40rpx;
line-height: 40rpx;
border-radius: 50%;
font-size: 26rpx;
font-weight: 500;
color: #F97316;
text-align: center;
}
}
.weekList
{
.item
{
line-height: 40rpx;
font-size: 24rpx;
color: #292621;
text-align: center;
}
}
.weekDateList
{
.item
{
padding-top: 14rpx;
.date
{
width: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
text-align: center;
}
.date.today
{
background-color: #F9731626;
border-radius: 5rpx;
color: #F97316;
}
.eventNum
{
// background-color: #EB4A46;
margin-top: 12rpx;
width: 80rpx;
height: 30rpx;
line-height: 30rpx;
border-radius: 5rpx;
font-size: 16rpx;
font-weight: 500;
color: white;
text-align: center;
}
.eventNum.danger
{
background-color: #EB4A46;
}
.eventNum.warning
{
background-color: #FD9C16;
}
.eventNum.info
{
background-color: #16BBCF;
}
.eventNum.success
{
background-color: #55AE59;
}
}
}
.monthDateList
{
.item
{
padding-top: 14rpx;
width: calc(100%/7);
.date
{
width: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
font-size: 32rpx;
font-weight: bold;
color: #CCCDD1;
.icon
{
margin-left: 16rpx;
width: 30rpx;
height: auto;
}
}
.today
{
background-color: #F3C368;
width: 40rpx;
line-height: 40rpx;
border-radius: 50%;
font-size: 26rpx;
font-weight: 500;
color: #070707;
text-align: center;
}
}
.weekList
{
.item
{
line-height: 40rpx;
font-size: 24rpx;
font-weight: 500;
color: #292621;
text-align: center;
}
.date.today
}
.weekDateList
{
margin-top: 6rpx;
padding: 0 20rpx;
.item
{
background-color: #F9731626;
margin-right: 16rpx;
padding: 10rpx 0 6rpx;
border-radius: 5rpx;
color: #F97316;
.date
{
font-size: 24rpx;
font-weight: bold;
color: #2A2A2A;
}
.eventNum
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2rpx;
font-size: 18rpx;
font-weight: bold;
}
}
.date.notCurrentMonth
.item:nth-child(7n)
{
color: #999;
margin-right: 0;
}
.eventNum
.item.select
{
margin-top: 12rpx;
width: 80rpx;
height: 30rpx;
line-height: 30rpx;
border-radius: 5rpx;
font-size: 16rpx;
font-weight: 500;
color: white;
text-align: center;
.date
{
color: white;
}
}
.eventNum.danger
.item.danger
{
background-color: #EB4A461A;
color: #EB4A46;
}
.item.select.danger
{
background-color: #EB4A46;
color: white;
}
.eventNum.warning
.item.warning
{
background-color: #FD9C16;
background-color: #FD9A141A;
color: #FD9A14;
}
.eventNum.info
.item.select.warning
{
background-color: #FD9A14;
color: white;
}
.item.info
{
background-color: #16BBCF1A;
color: #16BBCF;
}
.item.select.info
{
background-color: #16BBCF;
color: white;
}
.eventNum.success
.item.success
{
background-color: #55AE591A;
color: #55AE59;
}
.item.select.success
{
background-color: #55AE59;
color: white;
}
}
}
.expandBgC
{
margin: 0 25rpx;
border-bottom: solid 1rpx #E4E4E4;
.expandC
.monthDateList
{
padding: 20rpx 0;
font-size: 22rpx;
font-weight: 500;
color: #8A857C;
.arrow
margin-top: 6rpx;
padding: 0 20rpx;
.item
{
margin-left: 7rpx;
width: 15rpx;
height: auto;
margin: 0 16rpx 20rpx 0;
padding: 10rpx 0 6rpx;
width: calc((100% - 96rpx)/7);
border-radius: 5rpx;
.date
{
font-size: 26rpx;
font-weight: bold;
color: #2A2A2A;
}
.date.notCurrentMonth
{
color: #999;
}
.eventNum
{
margin-top: 2rpx;
font-size: 18rpx;
font-weight: bold;
}
}
.item:nth-child(7n)
{
margin-right: 0;
}
.item.select
{
.date
{
color: white;
}
}
.item.danger
{
background-color: #EB4A461A;
color: #EB4A46;
}
.item.select.danger
{
background-color: #EB4A46;
color: white;
}
.item.warning
{
background-color: #FD9A141A;
color: #FD9A14;
}
.item.select.warning
{
background-color: #FD9A14;
color: white;
}
.item.info
{
background-color: #16BBCF1A;
color: #16BBCF;
}
.item.select.info
{
background-color: #16BBCF;
color: white;
}
.item.success
{
background-color: #55AE591A;
color: #55AE59;
}
.item.select.success
{
background-color: #55AE59;
color: white;
}
}
.expandBgC
{
margin: 0 25rpx;
border-bottom: solid 1rpx #E4E4E4;
.expandC
{
padding: 20rpx 0;
font-size: 22rpx;
font-weight: 500;
color: #8A857C;
.arrow
{
margin-left: 7rpx;
width: 15rpx;
height: auto;
}
}
}
}
.tabC
{
margin-top: 10rpx;
.item
{
display: inline-block;
padding: 0 24rpx;
padding: 0 27rpx;
line-height: 70rpx;
font-size: 32rpx;
color: #42485B;
color: #CCCDD1;
}
.item.select
{
color: #F97316;
color: #F3C368;
}
}
.topCategoryC
{
white-space: nowrap;
border-bottom: solid 1rpx #E4E4E4;
.item
{
display: inline-block;
@@ -808,15 +878,15 @@
padding: 0 28rpx;
font-size: 27rpx;
font-weight: 500;
color: #42485B;
color: #939393;
}
.item.select
{
font-weight: bold;
color: black;
color: #F3C368;
.line
{
background-color: #F97316;
background-color: #F3C368;
left: calc((100% - 50rpx)/2);
width: 50rpx;
height: 2rpx;
@@ -827,29 +897,51 @@
}
.eventList
{
padding: 0 25rpx;
padding: 18rpx 25rpx;
.item
{
padding: 30rpx 0;
border-bottom: solid 1rpx #E4E4E4;
.time
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
margin-bottom: 20rpx;
padding: 30rpx 20rpx;
border-radius: 10rpx;
.timeStarFollowC
{
font-size: 24rpx;
font-weight: bold;
color: #767676;
}
.starC
{
.starList
.time
{
top: 0;
left: 0;
margin-right: 22rpx;
font-size: 24rpx;
font-weight: bold;
color: #767676;
}
.icon
.starC
{
margin-right: 9rpx;
width: 27rpx;
height: auto;
.starList
{
top: 0;
left: 0;
}
.icon
{
margin-right: 9rpx;
width: 27rpx;
height: auto;
}
}
.follow
{
background-color: #3D3D3D;
width: 90rpx;
line-height: 40rpx;
border-radius: 20rpx;
font-size: 22rpx;
font-weight: 500;
color: #F2C367;
text-align: center;
}
.follow.select
{
background-color: #F3C368;
color: #3D3D3D;
}
}
.categoryTitleC
@@ -857,23 +949,23 @@
margin-top: 18rpx;
.category
{
background-color: #FD9A14;
margin-right: 10rpx;
background-color: #F3C368;
margin-right: 12rpx;
padding: 0 12rpx;
line-height: 40rpx;
border-radius: 8rpx;
font-size: 22rpx;
font-size: 24rpx;
font-weight: bold;
color: white;
color: #070707;
}
.title
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
font-size: 28rpx;
font-weight: bold;
color: #222;
color: #3D3D3D;
}
}
.labelC
@@ -901,18 +993,18 @@
overflow: hidden;
font-size: 24rpx;
font-weight: 500;
color: #666;
color: #71675D;
}
.percentList
{
white-space: nowrap;
margin-top: 20rpx;
margin-top: 26rpx;
.percentItem
{
display: inline-flex;
align-items: center;
background-color: #F8F8F8;
background-color: white;
box-shadow: 0 7rpx 18rpx 0 rgba(217,217,217,0.28);
margin-right: 20rpx;
padding: 0 20rpx;
height: 70rpx;