1647 lines
42 KiB
Vue
1647 lines
42 KiB
Vue
<template>
|
||
<view>
|
||
<navBar leftText="概念中心" :hideNavBg="true" :hideBack="true"></navBar>
|
||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||
<view class="topC fixed" :style="'top: '+navH+'px;'">
|
||
<view class="searchRankC flex">
|
||
<view class="searchC flex flex1">
|
||
<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:#EEE" confirm-type="search" @confirm="clickSearch()"/>
|
||
</view>
|
||
<view class="rank" @click="clickRank()">排行榜</view>
|
||
</view>
|
||
<view class="dateScreenC flex">
|
||
<view class="flex1">最新数据: {{newestPriceDate}}</view>
|
||
<view class="sortTypeC flex" @click="clickSortType()">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/sortType.png" mode="widthFix"></image>
|
||
<view>{{sortTypeStr}}</view>
|
||
<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="transactionDateC flex" @click="clickTransactionDate()">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/transactionDate.png" mode="widthFix"></image>
|
||
<view>交易日期</view>
|
||
<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y direction="vertical" class="conceptList fixed" :style="'top: '+listTop+'px;'" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="pullDownRefresh()" @scrolltolower="loadMoreData()">
|
||
<view class="list">
|
||
<view class="item" v-for="(item,index) in conceptList" :key="index">
|
||
<view class="titleChgStockNumC flex">
|
||
<view class="title" @click.stop="clickConceptItem(item.concept)">{{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" @click.stop="clickConceptItem(item.concept)">{{item.description}}</view>
|
||
<view class="hotStockC flex">
|
||
<view class="title">热门个股</view>
|
||
<view 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>
|
||
</scroll-view>
|
||
<uni-popup ref="rankPopup" type="bottom" :safeArea="false">
|
||
<view class="rankPopup relative">
|
||
<view class="popTitle">排行榜</view>
|
||
<view class="closeC absolute" @click="clickRankClose()">
|
||
<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="statisticsC">
|
||
<view class="titleRangeC flex">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/statistics.png" mode="widthFix"></image>
|
||
<view class="flex1">
|
||
<view class="title">概念统计中心</view>
|
||
<view class="range">统计范围: {{startDateStr}} 至 {{endDateStr}} </view>
|
||
</view>
|
||
</view>
|
||
<view class="cycleC flex">
|
||
<view class="title">统计周期：</view>
|
||
<view class="list flex">
|
||
<view :class="'item '+(selectCycleIndex==index?'select':'')" v-for="(item,index) in cycleList" :key="index" @click="clickRankCycleListItem(index)">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="selectCycleIndex==3" class="rangeC flex">
|
||
<view class="startDateC" @click="clickCustomDateCycle(2)">{{selectStartDateStr}}</view>
|
||
<view class="and">至</view>
|
||
<view class="endDateC" @click="clickCustomDateCycle(3)">{{selectEndDateStr}}</view>
|
||
<view class="apply" @click="clickApply()">应用</view>
|
||
</view>
|
||
</view>
|
||
<view class="tabC flex">
|
||
<view :class="'item flex1 flexCenter '+(selectTab==index?'select':'')" v-for="(item,index) in rankTabList" :key="index" @click="clickRankTabItem(index)">
|
||
<image v-if="selectTab==index" class="icon" :src="item.selectIcon" mode="widthFix"></image>
|
||
<image v-else class="icon" :src="item.icon" mode="widthFix"></image>
|
||
<view>{{item.title}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="rankList">
|
||
<view class="item flex" v-for="(item,index) in rankList" :key="index">
|
||
<image v-if="index==0" class="rankIcon" src="/static/icon/home/conceptCenter/rank1.png" mode="widthFix"></image>
|
||
<image v-if="index==1" class="rankIcon" src="/static/icon/home/conceptCenter/rank2.png" mode="widthFix"></image>
|
||
<image v-if="index==2" class="rankIcon" src="/static/icon/home/conceptCenter/rank3.png" mode="widthFix"></image>
|
||
<view v-if="index>2" class="rankIndex">{{index+1}}</view>
|
||
<view class="flex1">
|
||
<view class="title" @click.stop="clickConceptItem(item.name)">{{item.name}}</view>
|
||
<block v-if="selectTab==3||selectTab==4">
|
||
<view v-if="selectTab==3" class="calendarBrowseC">均幅 {{item.avg_change}}%</view>
|
||
<view v-if="selectTab==4" class="calendarBrowseC">累计 +{{item.total_change}}%</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="calendarBrowseC flex">
|
||
<view v-if="selectTab==0||selectTab==1" class="chgC flex">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/rankChg.png" mode="widthFix"></image>
|
||
<view>{{item.news_count}}</view>
|
||
</view>
|
||
<view class="calendarC flex">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/calendar.png" mode="widthFix"></image>
|
||
<view>{{item.news_count}}</view>
|
||
</view>
|
||
<view v-if="selectTab==2" class="browseC flex">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/browse.png" mode="widthFix"></image>
|
||
<view><view>{{item.report_count}}</view></view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="valueC flex">
|
||
<image :class="'icon '+(selectTab==4?'continuousRise':'')" :src="rankTabList[selectTab].selectIcon" mode="widthFix"></image>
|
||
<view v-if="selectTab==0">{{item.change_pct}}%</view>
|
||
<view v-if="selectTab==1">{{item.change_pct}}%</view>
|
||
<view v-if="selectTab==2">{{item.total_mentions}}</view>
|
||
<view v-if="selectTab==3">{{item.volatility}}%</view>
|
||
<view v-if="selectTab==4">{{item.consecutive_days}}天</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="sortTypePopup" type="top" mask-background-color="transparent" :animation="false">
|
||
<view class="sortTypePopup relative">
|
||
<image class="arrow absolute" src="/static/icon/home/sortArrow.png" mode="widthFix"></image>
|
||
<view class="list" :style="'margin-top:'+sortListTop+'px;'">
|
||
<view class="item flex" v-for="(item,index) in sortTypeList" :key="index" @click="clickSortListItem(item)">
|
||
<image class="icon" :src="item.icon" mode="aspectFit"></image>
|
||
<text> {{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="transactionDatePopup" type="bottom" :safeArea="false">
|
||
<view class="transactionDatePopup">
|
||
<view class="btnTitleC flex">
|
||
<view class="btn cancel" @click="clickCancel()">取消</view>
|
||
<view class="title flex1">交易日期</view>
|
||
<view class="btn confirm" @click="clickConfirm()">确认</view>
|
||
</view>
|
||
<view class="yearMonthC flex">
|
||
<view class="btn" @click="clickPreMonth()">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/pre.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="yearMonth flex1">
|
||
<picker mode="date" fields="month" @change="">
|
||
<view>{{selectMonth}}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="btn" @click="clickNextMonth()">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/next.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="weekList flex">
|
||
<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
|
||
</view>
|
||
<view class="monthDateList flexWrap">
|
||
<view class="item flexColumnCenter" v-for="(item,index) in monthDateList[selectMonthIndex]" :key="index" @click="clickSelectDate(item)">
|
||
<block v-if="item.date==selectDateStr">
|
||
<view class="date select">{{item.day}}</view>
|
||
</block>
|
||
<block v-else>
|
||
<block v-if="!item.isCurrentMonth">
|
||
<view class="date notCurrentMonth">{{item.day}}</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="date">{{item.day}}</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="quickTimeC flexCenter">
|
||
<view class="item" v-for="(item,index) in quickTimeList" :key="index" @click="clickQuickTimeItem(index)">{{item}}</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 { conceptRankList, eventRelatedConcept, newestPriceDate, membershipStatus } from '@/request/api';
|
||
import { getChgRateStr, getRateUpOrDown } from '@/utils/util';
|
||
import CryptoJS from 'crypto-js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
navH:inject('navHeight'),
|
||
listTop:'',
|
||
sortListTop:'',
|
||
keywords:'', //搜索关键字
|
||
newestPriceDate:'', //最新价格日期
|
||
popType:'', //日期弹窗类型1交易日期2排行榜开始日期3排行榜结束日期
|
||
cycleList:['3天','7天','14天','自定义'], //统计周期
|
||
selectCycleIndex:0, //选中周期下标
|
||
startDateStr:'', //统计开始日期
|
||
endDateStr:'', //统计结束日期
|
||
selectStartDateStr:'', //选择的自定义开始日期
|
||
selectStartMonthIndex:0, //开始日期选中月份下标
|
||
selectStartMonth:'', //结束日期选中年月
|
||
selectEndDateStr:'', //选择的自定义结束日期
|
||
selectEndMonthIndex:0, //结束日期选中月份下标
|
||
selectEndMonth:'', //结束日期选中年月
|
||
rankTabList:[{
|
||
icon:'/static/icon/home/conceptCenter/increaseRate.png',
|
||
selectIcon:'/static/icon/home/conceptCenter/increaseRate_s.png',
|
||
title:'涨幅榜'
|
||
},
|
||
{
|
||
icon:'/static/icon/home/conceptCenter/decreaseRate.png',
|
||
selectIcon:'/static/icon/home/conceptCenter/decreaseRate_s.png',
|
||
title:'跌幅榜'
|
||
},
|
||
{
|
||
icon:'/static/icon/home/conceptCenter/active.png',
|
||
selectIcon:'/static/icon/home/conceptCenter/active_s.png',
|
||
title:'活跃榜'
|
||
},
|
||
{
|
||
icon:'/static/icon/home/conceptCenter/fluctuate.png',
|
||
selectIcon:'/static/icon/home/conceptCenter/fluctuate_s.png',
|
||
title:'波动榜'
|
||
},
|
||
{
|
||
icon:'/static/icon/home/conceptCenter/continuousRise.png',
|
||
selectIcon:'/static/icon/home/conceptCenter/continuousRise_s.png',
|
||
title:'连涨榜'
|
||
}],
|
||
selectTab:0,
|
||
rankList:[], //排行榜
|
||
sortTypeList:[{
|
||
icon:'/static/icon/home/conceptCenter/chgSort.png',
|
||
name:'涨跌幅',
|
||
key:'change_pct'
|
||
},
|
||
{
|
||
icon:'/static/icon/home/conceptCenter/correlationSort.png',
|
||
name:'相关度',
|
||
key:'_score'
|
||
},
|
||
{
|
||
icon:'/static/icon/home/conceptCenter/stockNumSort.png',
|
||
name:'股票数量',
|
||
key:'stock_count'
|
||
},
|
||
{
|
||
icon:'/static/icon/home/conceptCenter/conceptNameSort.png',
|
||
name:'概念名称',
|
||
key:'concept_name'
|
||
}],
|
||
sortType:'change_pct', //选择的排序方式
|
||
sortTypeStr:'涨跌幅', //选择的排序方式
|
||
weekList:['一','二','三','四','五','六','日'],
|
||
monthDateList:[],
|
||
selectMonthIndex:0, //选中月份下标
|
||
selectMonth:'', //选中年月
|
||
selectDateStr:'', //选中日期
|
||
selectTradeDateStr:'', //交易日期选中日期
|
||
selectTradeMonthIndex:0, //交易日期选中月份下标
|
||
selectTradeMonth:'', //交易日期选中年月
|
||
quickTimeList:['今天','昨天','一周前','一月前'],
|
||
conceptList:[],
|
||
page:1,
|
||
isRefreshing:false, //下拉刷新
|
||
loadAll:false, //是否加载完毕
|
||
getRateUpOrDown:getRateUpOrDown,
|
||
getChgRateStr:getChgRateStr,
|
||
memberInfo:null, //会员信息
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.listTop = this.navH + (20+70+20+30+20)/750*inject('windowWidth')
|
||
this.sortListTop = this.navH + (20+70+20+30+20)/750*inject('windowWidth')
|
||
let currentDate = new Date();
|
||
// 获取当前年份
|
||
let currentYear = currentDate.getFullYear();
|
||
let currentMonth = currentDate.getMonth()+1;
|
||
let currentDay = currentDate.getDate();
|
||
this.selectMonthIndex = this.selectTradeMonthIndex = this.selectEndMonthIndex = 20*12+currentMonth-1
|
||
this.selectMonth = this.selectTradeMonth = this.selectEndMonth = currentYear+'年'+currentMonth+'月'
|
||
this.selectDateStr = this.selectTradeDateStr = this.endDateStr = this.selectEndDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
|
||
let startDate = new Date(currentDate)
|
||
startDate.setDate(startDate.getDate()-3)
|
||
let startYear = startDate.getFullYear();
|
||
let startMonth = startDate.getMonth()+1;
|
||
let startDay = startDate.getDate();
|
||
this.selectStartMonthIndex = (20 + currentYear - startYear)*12+startMonth-1
|
||
this.selectStartMonth = startYear+'年'+startMonth+'月'
|
||
this.startDateStr = this.selectStartDateStr = startYear+'-'+(startMonth>9?startMonth:('0'+startMonth))+'-'+(startDay>9?startDay:('0'+startDay))
|
||
this.generateMonthDateListData()
|
||
this.getNewestPriceDateData()
|
||
this.getRankListData()
|
||
this.getMemberStatusData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 生成日历数据
|
||
*/
|
||
generateMonthDateListData()
|
||
{
|
||
let currentDate = new Date();
|
||
// 获取当前年份
|
||
let currentYear = currentDate.getFullYear();
|
||
let currentMonth = currentDate.getMonth()+1;
|
||
let currentDay = currentDate.getDate();
|
||
let monthDateList = []
|
||
for (var i = currentYear-20; i < currentYear+20; i++) {
|
||
for (var j = 0; j < 12; j++) {
|
||
let date = new Date(i,j+1,0)
|
||
let firstDayOfMonth = new Date(i,j+1,0);
|
||
firstDayOfMonth.setDate(1);
|
||
//获取当前月天数
|
||
let currentMonthDay = date.getDate()
|
||
let firstDayWeek = firstDayOfMonth.getDay() || 7
|
||
let daysOfMonth = []
|
||
for (var k = 1; k <= currentMonthDay; k++) {
|
||
let newDate = new Date(i,j+1,0)
|
||
newDate.setDate(k); // 设置日期为当前月的相应日期
|
||
let newMonth = newDate.getMonth()+1
|
||
let newDay = newDate.getDate()
|
||
let time = newDate.getTime()
|
||
let date = i+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||
daysOfMonth.push({date:date,year:i,month:newMonth,day:newDay,isToday:(i==currentYear&&newMonth==currentMonth&&newDay==currentDay)?true:false,isCurrentMonth:true,timestamp:time});
|
||
}
|
||
for (var k = 0; k < firstDayWeek-1; k++) {
|
||
//获取上月天数
|
||
let year = i
|
||
let month = j
|
||
if(j<1)
|
||
{
|
||
year = i - 1
|
||
month = 12
|
||
}
|
||
let lastMonthDay = new Date(year, month, 0).getDate()
|
||
//获取上月日期
|
||
let newDate = new Date(year,month-1,lastMonthDay-k)
|
||
let newMonth = newDate.getMonth()+1
|
||
let newDay = newDate.getDate()
|
||
let time = newDate.getTime()
|
||
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||
daysOfMonth.unshift({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
|
||
}
|
||
// 下一个月的第一天
|
||
let nextMonthFirstDay = new Date(i, j+1, 1);
|
||
// 然后减去一天就是当前月的最后一天
|
||
let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
|
||
let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
|
||
for (var k = 1; k < 8-lastDayWeek; k++) {
|
||
let year = i
|
||
let month = j
|
||
if(month>11)
|
||
{
|
||
month = 0
|
||
year ++
|
||
}
|
||
//获取下月日期
|
||
let newDate = new Date(year,month + 1,k)
|
||
let newMonth = newDate.getMonth()+1
|
||
let newDay = newDate.getDate()
|
||
let time = newDate.getTime()
|
||
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||
daysOfMonth.push({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
|
||
}
|
||
monthDateList.push(daysOfMonth)
|
||
}
|
||
}
|
||
this.monthDateList = monthDateList
|
||
},
|
||
/**
|
||
* 下拉刷新
|
||
*/
|
||
pullDownRefresh(){
|
||
this.isRefreshing = true
|
||
this.clickSearch()
|
||
},
|
||
/**
|
||
* 上拉加载
|
||
*/
|
||
loadMoreData()
|
||
{
|
||
if(!this.loadAll)
|
||
{
|
||
this.page ++
|
||
this.getConceptCenterData()
|
||
}
|
||
},
|
||
/**
|
||
* 点击搜索
|
||
*/
|
||
clickSearch()
|
||
{
|
||
this.page = 1
|
||
this.getConceptCenterData()
|
||
},
|
||
/**
|
||
* 点击排行榜
|
||
*/
|
||
clickRank()
|
||
{
|
||
this.$refs["rankPopup"].open()
|
||
},
|
||
/**
|
||
* 点击关闭排行榜弹窗
|
||
*/
|
||
clickRankClose()
|
||
{
|
||
this.$refs["rankPopup"].close()
|
||
},
|
||
/**
|
||
* 点击切换统计周期
|
||
*/
|
||
clickRankCycleListItem(index)
|
||
{
|
||
if (this.selectCycleIndex!=index) {
|
||
this.selectCycleIndex = index
|
||
if (index==3)
|
||
{
|
||
//自定义周期
|
||
|
||
}else
|
||
{
|
||
let currentDate = new Date();
|
||
// 获取当前年份
|
||
let currentYear = currentDate.getFullYear();
|
||
// 获取当前月
|
||
let currentMonth = currentDate.getMonth()+1;
|
||
// 获取当前日
|
||
let currentDay = currentDate.getDate();
|
||
let selectDate = new Date(currentDate)
|
||
if (index==0)
|
||
{
|
||
selectDate.setDate(selectDate.getDate()-3)
|
||
}else if (index==1)
|
||
{
|
||
selectDate.setDate(selectDate.getDate()-7)
|
||
}else if (index==2)
|
||
{
|
||
selectDate.setDate(selectDate.getDate()-14)
|
||
}
|
||
let startYear = selectDate.getFullYear();
|
||
let startMonth = selectDate.getMonth()+1;
|
||
let startDay = selectDate.getDate();
|
||
this.endDateStr = this.selectEndDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
|
||
this.startDateStr = this.selectStartdateStr = startYear+'-'+(startMonth>9?startMonth:('0'+startMonth))+'-'+(startDay>9?startDay:('0'+startDay))
|
||
this.getRankListData()
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 点击自定义周期日期
|
||
* @param {Object} type
|
||
*/
|
||
clickCustomDateCycle(type)
|
||
{
|
||
this.popType = type
|
||
if (type==2) {
|
||
//排行榜自定义开始时间
|
||
this.selectDateStr = this.selectStartDateStr
|
||
this.selectMonth = this.selectStartMonth
|
||
this.selectMonthIndex = this.selectStartMonthIndex
|
||
} else {
|
||
//排行榜自定义结束时间
|
||
this.selectDateStr = this.selectEndDateStr
|
||
this.selectMonth = this.selectEndMonth
|
||
this.selectMonthIndex = this.selectEndMonthIndex
|
||
}
|
||
this.$refs["transactionDatePopup"].open()
|
||
},
|
||
/**
|
||
* 点击应用最新日期
|
||
*/
|
||
clickApply()
|
||
{
|
||
let startTimeStamp = new Date(this.selectStartDateStr)
|
||
let endTimeStamp = new Date(this.selectEndDateStr)
|
||
if(startTimeStamp>endTimeStamp)
|
||
{
|
||
uni.showToast({
|
||
title:'开始日期不能晚于结束日期',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
this.startDateStr = this.selectStartDateStr
|
||
this.endDateStr = this.selectEndDateStr
|
||
this.getRankListData()
|
||
},
|
||
/**
|
||
* 点击切换排行榜分类
|
||
* @param {Object} index
|
||
*/
|
||
clickRankTabItem(index)
|
||
{
|
||
if (this.selectTab!=index) {
|
||
this.selectTab = index
|
||
this.getRankListData()
|
||
}
|
||
},
|
||
/**
|
||
* 点击切换排序方式
|
||
*/
|
||
clickSortType()
|
||
{
|
||
this.$refs["sortTypePopup"].open()
|
||
},
|
||
/**
|
||
* 点击切换排序方式
|
||
* @param {Object} item
|
||
*/
|
||
clickSortListItem(item)
|
||
{
|
||
this.sortType = item.key
|
||
this.sortTypeStr = item.name
|
||
this.clickSearch()
|
||
this.$refs["sortTypePopup"].close()
|
||
},
|
||
/**
|
||
* 点击交易日期
|
||
*/
|
||
clickTransactionDate()
|
||
{
|
||
this.popType = 1
|
||
this.selectDateStr = this.selectTradeDateStr
|
||
this.selectMonth = this.selectTradeMonth
|
||
this.selectMonthIndex = this.selectTradeMonthIndex
|
||
this.$refs["transactionDatePopup"].open()
|
||
},
|
||
/**
|
||
* 点击取消
|
||
*/
|
||
clickCancel()
|
||
{
|
||
this.$refs["transactionDatePopup"].close()
|
||
},
|
||
/**
|
||
* 点击确认
|
||
*/
|
||
clickConfirm()
|
||
{
|
||
this.clickCancel()
|
||
if (this.popType==1) {
|
||
//交易日期
|
||
this.selectTradeDateStr = this.selectDateStr
|
||
this.selectTradeMonth = this.selectMonth
|
||
this.selectTradeMonthIndex = this.selectMonthIndex
|
||
this.getConceptCenterData()
|
||
}else if (this.popType==2) {
|
||
//排行榜自定义周期开始时间
|
||
this.selectStartDateStr = this.selectDateStr
|
||
this.selectStartMonth = this.selectMonth
|
||
this.selectStartMonthIndex = this.selectMonthIndex
|
||
}else
|
||
{
|
||
//排行榜自定义周期结束时间
|
||
this.selectEndDateStr = this.selectDateStr
|
||
this.selectEndMonth= this.selectMonth
|
||
this.selectEndMonthIndex = this.selectMonthIndex
|
||
}
|
||
},
|
||
/**
|
||
* 点击上个月
|
||
*/
|
||
clickPreMonth()
|
||
{
|
||
if(this.selectMonthIndex>0)
|
||
{
|
||
this.selectMonthIndex --
|
||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||
let year = ''
|
||
let month = ''
|
||
for (let item of monthList) {
|
||
if(item.isCurrentMonth)
|
||
{
|
||
year = item.year
|
||
month = item.month
|
||
break
|
||
}
|
||
}
|
||
this.selectMonth = year+'年'+month+'月'
|
||
}
|
||
},
|
||
/**
|
||
* 点击下个月
|
||
*/
|
||
clickNextMonth()
|
||
{
|
||
if(this.selectMonthIndex<this.monthDateList.length-1)
|
||
{
|
||
this.selectMonthIndex ++
|
||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||
let year = ''
|
||
let month = ''
|
||
for (let item of monthList) {
|
||
if(item.isCurrentMonth)
|
||
{
|
||
year = item.year
|
||
month = item.month
|
||
break
|
||
}
|
||
}
|
||
this.selectMonth = year+'年'+month+'月'
|
||
}
|
||
},
|
||
monthChange(e)
|
||
{
|
||
let currentDate = new Date();
|
||
//当前年份
|
||
let currentYear = currentDate.getFullYear()
|
||
//选中年月
|
||
let yearMonth = e.detail.value
|
||
let selectYear = parseInt(yearMonth.split('-')[0])
|
||
let selectMonth = parseInt(yearMonth.split('-')[1])
|
||
this.selectMonthIndex = (selectYear - (currentYear - 20))*12+selectMonth-1
|
||
this.selectMonth = selectYear+'年'+selectMonth+'月'
|
||
},
|
||
/**
|
||
* 点击选择交易日期
|
||
* @param {Object} item
|
||
*/
|
||
clickSelectDate(item)
|
||
{
|
||
if (this.selectDateStr!=item.date){
|
||
//记录选中日期
|
||
this.selectDateStr = item.date
|
||
}
|
||
},
|
||
/**
|
||
* 点击快捷时间选择
|
||
*/
|
||
clickQuickTimeItem(index)
|
||
{
|
||
let currentDate = new Date();
|
||
let currentYear = currentDate.getFullYear();
|
||
if (index==0) {
|
||
//今天
|
||
let currentMonth = currentDate.getMonth()+1;
|
||
let currentDay = currentDate.getDate();
|
||
this.selectMonthIndex = 20*12+currentMonth-1
|
||
this.selectMonth = currentYear+'年'+currentMonth+'月'
|
||
this.selectDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
|
||
}else if (index==1) {
|
||
//昨天
|
||
let yesterday = new Date(currentDate)
|
||
yesterday.setDate(yesterday.getDate()-1)
|
||
let yesterdayYear = yesterday.getFullYear();
|
||
let yesterdayMonth = yesterday.getMonth()+1;
|
||
let yesterdayDay = yesterday.getDate();
|
||
this.selectMonthIndex = (20 - (currentYear-yesterdayYear))*12+yesterdayMonth-1
|
||
this.selectMonth = yesterdayYear+'年'+yesterdayMonth+'月'
|
||
this.selectDateStr = yesterdayYear+'-'+(yesterdayMonth>9?yesterdayMonth:('0'+yesterdayMonth))+'-'+(yesterdayDay>9?yesterdayDay:('0'+yesterdayDay))
|
||
}else if (index==2) {
|
||
//一周前
|
||
let weekAgo = new Date(currentDate)
|
||
weekAgo.setDate(weekAgo.getDate()-7)
|
||
let weekAgoYear = weekAgo.getFullYear();
|
||
let weekAgoMonth = weekAgo.getMonth()+1;
|
||
let weekAgoDay = weekAgo.getDate();
|
||
this.selectMonthIndex = (20 - (currentYear-weekAgoYear))*12+weekAgoMonth-1
|
||
this.selectMonth = weekAgoYear+'年'+weekAgoMonth+'月'
|
||
this.selectDateStr = weekAgoYear+'-'+(weekAgoMonth>9?weekAgoMonth:('0'+weekAgoMonth))+'-'+(weekAgoDay>9?weekAgoDay:('0'+weekAgoDay))
|
||
}else
|
||
{
|
||
//一月前
|
||
let monthAgo = new Date(currentDate)
|
||
monthAgo.setDate(monthAgo.getDate()-30)
|
||
let monthAgoYear = monthAgo.getFullYear();
|
||
let monthAgoMonth = monthAgo.getMonth()+1;
|
||
let monthAgoDay = monthAgo.getDate();
|
||
this.selectMonthIndex = (20 - (currentYear-monthAgoYear))*12+monthAgoMonth-1
|
||
this.selectMonth = monthAgoYear+'年'+monthAgoMonth+'月'
|
||
this.selectDateStr = monthAgoYear+'-'+(monthAgoMonth>9?monthAgoMonth:('0'+monthAgoMonth))+'-'+(monthAgoDay>9?monthAgoDay:('0'+monthAgoDay))
|
||
}
|
||
},
|
||
/**
|
||
* 非vip点击
|
||
*/
|
||
clickNotVip()
|
||
{
|
||
this.$refs["vipPopup"].open()
|
||
},
|
||
/**
|
||
* 点击稍后再说
|
||
*/
|
||
clickLater()
|
||
{
|
||
this.$refs["vipPopup"].close()
|
||
},
|
||
/**
|
||
* 点击立即升级
|
||
*/
|
||
clickUpgradeAtOnce()
|
||
{
|
||
this.clickLater()
|
||
},
|
||
/**
|
||
* 点击查看相关概念
|
||
*/
|
||
clickConceptItem(name)
|
||
{
|
||
let md5 = CryptoJS.MD5(name).toString()
|
||
uni.navigateTo({
|
||
url:'/pages/index/conceptDetails/conceptDetails?name='+md5
|
||
})
|
||
},
|
||
/**
|
||
* 点击查看更多个股
|
||
*/
|
||
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
|
||
})
|
||
},
|
||
/**
|
||
* 获取概念中心数据
|
||
*/
|
||
getConceptCenterData()
|
||
{
|
||
let dateStr = this.selectDateStr
|
||
let selectDateTimestamp = new Date(this.selectDateStr).getTime()
|
||
let newestTimeStamp = new Date(this.newestPriceDate).getTime()
|
||
if (selectDateTimestamp > newestTimeStamp) {
|
||
//如果选择的日期在最新交易日之前
|
||
dateStr = this.newestPriceDate
|
||
}
|
||
let param = {query:this.keywords,size:10,page:this.page,sort_by:this.sortType,isJson:1,trade_date:dateStr}
|
||
eventRelatedConcept(param).then(res=>{
|
||
this.isRefreshing = false
|
||
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=>{
|
||
this.isRefreshing = false
|
||
})
|
||
},
|
||
/**
|
||
* 获取最新价格数据
|
||
*/
|
||
getNewestPriceDateData(){
|
||
newestPriceDate().then(res=>{
|
||
this.newestPriceDate = res.latest_trade_date
|
||
this.getConceptCenterData()
|
||
}).catch(error=>{
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 获取会员状态
|
||
*/
|
||
getMemberStatusData()
|
||
{
|
||
let token = uni.getStorageSync('token')
|
||
if (!token) {
|
||
return
|
||
}
|
||
membershipStatus().then(res=>{
|
||
if (res.code==200) {
|
||
this.memberInfo = res.data
|
||
} else
|
||
uni.showToast({
|
||
title:res.message,
|
||
icon:'none'
|
||
})
|
||
}).catch(error=>{
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 获取排行榜数据
|
||
*/
|
||
getRankListData()
|
||
{
|
||
var params = {}
|
||
if (this.selectCycleIndex==3)
|
||
{
|
||
//自定义周期
|
||
params.start_date = this.startDateStr
|
||
params.end_date = this.endDateStr
|
||
}else
|
||
{
|
||
params.days = 3
|
||
if(this.selectCycleIndex==1) {
|
||
params.days = 7
|
||
}else if(this.selectCycleIndex==2) {
|
||
params.days = 14
|
||
}
|
||
params.min_stock_count = 3
|
||
}
|
||
conceptRankList(params).then(res=>{
|
||
if (this.selectTab==0) {
|
||
//涨幅榜
|
||
this.rankList = res.data.hot_concepts
|
||
}else if (this.selectTab==1) {
|
||
//跌幅榜
|
||
this.rankList = res.data.cold_concepts
|
||
} else if (this.selectTab==2) {
|
||
//活跃榜
|
||
this.rankList = res.data.active_concepts
|
||
}else if (this.selectTab==3) {
|
||
//波动榜
|
||
this.rankList = res.data.volatile_concepts
|
||
}else {
|
||
//连涨榜
|
||
this.rankList = res.data.momentum_concepts
|
||
}
|
||
}).catch(error=>{
|
||
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
page
|
||
{
|
||
background-color: #070707;
|
||
}
|
||
.topBg
|
||
{
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.topC
|
||
{
|
||
margin-top: 20rpx;
|
||
left: 0;
|
||
right: 0;
|
||
.searchRankC
|
||
{
|
||
padding: 0 25rpx;
|
||
.searchC
|
||
{
|
||
background-color: #292929B3;
|
||
padding: 0 25rpx;
|
||
height: 70rpx;
|
||
border-radius: 35rpx;
|
||
border: solid 1rpx #363636;
|
||
.icon
|
||
{
|
||
margin-right: 12rpx;
|
||
width: 25rpx;
|
||
height: auto;
|
||
}
|
||
input
|
||
{
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
color: white;
|
||
}
|
||
}
|
||
.rank
|
||
{
|
||
padding: 0 14rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #B5B6B6;
|
||
}
|
||
}
|
||
.dateScreenC
|
||
{
|
||
padding: 20rpx 0 20rpx 27rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #CCCDD1;
|
||
.sortTypeC
|
||
{
|
||
padding: 0 24rpx;
|
||
.icon
|
||
{
|
||
margin-right: 14rpx;
|
||
width: 30rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.line
|
||
{
|
||
background-color: #CCCDD1;
|
||
width: 1rpx;
|
||
height: 25rpx;
|
||
}
|
||
.transactionDateC
|
||
{
|
||
padding: 0 17rpx;
|
||
.icon
|
||
{
|
||
margin-right: 10rpx;
|
||
width: 23rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.arrow
|
||
{
|
||
margin-left: 7rpx;
|
||
width: 11rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
.conceptList
|
||
{
|
||
left: 0;
|
||
right: 0;
|
||
bottom: calc(55px + env(safe-area-inset-bottom));
|
||
.list
|
||
{
|
||
padding: 0 25rpx;
|
||
.item
|
||
{
|
||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||
margin-bottom: 24rpx;
|
||
border-radius: 10rpx;
|
||
.titleChgStockNumC
|
||
{
|
||
padding: 24rpx 18rpx 0;
|
||
.title
|
||
{
|
||
margin-right: 20rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #3D3D3D;
|
||
word-break: break-all;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.rankPopup
|
||
{
|
||
background-color: white;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
.popTitle
|
||
{
|
||
padding-top: 30rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
.closeC
|
||
{
|
||
padding: 26rpx;
|
||
top: 0;
|
||
right: 0;
|
||
.icon
|
||
{
|
||
width: 20rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.statisticsC
|
||
{
|
||
background: linear-gradient(-30deg, #F3C368 0%, #FAD590 100%);
|
||
margin: 20rpx 25rpx 0;
|
||
padding: 24rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
.titleRangeC
|
||
{
|
||
.icon
|
||
{
|
||
margin-right: 21rpx;
|
||
width: 80rpx;
|
||
height: auto;
|
||
}
|
||
.title
|
||
{
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.range
|
||
{
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
color: #232323;
|
||
}
|
||
}
|
||
.cycleC
|
||
{
|
||
margin-top: 20rpx;
|
||
.title
|
||
{
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
.list
|
||
{
|
||
.item
|
||
{
|
||
background-color: #ffffff4D;
|
||
margin-right: 15rpx;
|
||
padding: 0 15rpx;
|
||
line-height: 50rpx;
|
||
border-radius: 5rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
.item.select
|
||
{
|
||
background-color: #ffffff99;
|
||
}
|
||
}
|
||
}
|
||
.rangeC
|
||
{
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
.startDateC
|
||
{
|
||
padding: 0 10rpx;
|
||
border: solid 2rpx white;
|
||
border-radius: 10rpx;
|
||
}
|
||
.and
|
||
{
|
||
margin: 0 10rpx;
|
||
}
|
||
.endDateC
|
||
{
|
||
padding: 0 10rpx;
|
||
border: solid 2rpx white;
|
||
border-radius: 10rpx;
|
||
}
|
||
.apply
|
||
{
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.tabC
|
||
{
|
||
background-color: #FFF3DD;
|
||
margin: 20rpx 25rpx 0;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
.item
|
||
{
|
||
height: 60rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #070707;
|
||
.icon
|
||
{
|
||
margin-right: 7rpx;
|
||
width: 11rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.item.select
|
||
{
|
||
background-color: #FF7722;
|
||
color: white;
|
||
}
|
||
.item:last-child
|
||
{
|
||
.icon
|
||
{
|
||
width: 15rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
.rankList
|
||
{
|
||
margin-top: 22rpx;
|
||
padding: 0 25rpx;
|
||
max-height: 500rpx;
|
||
overflow-y: scroll;
|
||
.item
|
||
{
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx 22rpx;
|
||
border-radius: 10rpx;
|
||
border: solid 1rpx #FCE2B2;
|
||
.rankIcon
|
||
{
|
||
margin-right: 34rpx;
|
||
width: 35rpx;
|
||
height: auto;
|
||
}
|
||
.rankIndex
|
||
{
|
||
background-color: #898989;
|
||
margin-right: 34rpx;
|
||
width: 36rpx;
|
||
line-height: 41rpx;
|
||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||
font-size: 24rpx;
|
||
color: #F7FAFC;
|
||
text-align: center;
|
||
}
|
||
.title
|
||
{
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #3D3D3D;
|
||
}
|
||
.calendarBrowseC
|
||
{
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #936E5C;
|
||
.chgC
|
||
{
|
||
margin-right: 30rpx;
|
||
.icon
|
||
{
|
||
margin-right: 6rpx;
|
||
width: 15rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.calendarC
|
||
{
|
||
margin-right: 30rpx;
|
||
.icon
|
||
{
|
||
margin-right: 6rpx;
|
||
width: 16rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.browseC
|
||
{
|
||
.icon
|
||
{
|
||
margin-right: 6rpx;
|
||
width: 17rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
.valueC
|
||
{
|
||
background-color: #FF7722;
|
||
padding: 0 24rpx;
|
||
height: 40rpx;
|
||
border-radius: 5rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: white;
|
||
.icon
|
||
{
|
||
margin-right: 6rpx;
|
||
width: 11rpx;
|
||
height: auto;
|
||
}
|
||
.icon.continuousRise
|
||
{
|
||
width: 15rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.sortTypePopup
|
||
{
|
||
background-color: white;
|
||
margin-left: calc(100% - (170rpx + 120rpx));
|
||
width: 170rpx;
|
||
box-shadow: 0 5rpx 10px 0 rgba(7, 7, 7, 0.15);
|
||
border-radius: 10rpx;
|
||
.arrow
|
||
{
|
||
top: -13rpx;
|
||
left: 38rpx;
|
||
width: 26rpx;
|
||
height: auto;
|
||
}
|
||
.list
|
||
{
|
||
.item
|
||
{
|
||
padding: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #444;
|
||
.icon
|
||
{
|
||
margin-right: 11rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.transactionDatePopup
|
||
{
|
||
background-color: white;
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
.btnTitleC
|
||
{
|
||
.btn
|
||
{
|
||
padding: 20rpx 26rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
.btn.cancel
|
||
{
|
||
color: #727A8E;
|
||
}
|
||
.btn.confirm
|
||
{
|
||
color: #D79412;
|
||
}
|
||
.title
|
||
{
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.yearMonthC
|
||
{
|
||
background-color: #F7F7F7;
|
||
margin: 0 25rpx;
|
||
height: 70rpx;
|
||
border-radius: 35rpx;
|
||
.btn
|
||
{
|
||
padding: 0 52rpx;
|
||
.icon
|
||
{
|
||
width: 13rpx;
|
||
height: auto;
|
||
}
|
||
|
||
}
|
||
.yearMonth
|
||
{
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #070707;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.weekList
|
||
{
|
||
padding: 0 38rpx;
|
||
.item
|
||
{
|
||
margin-right: 13rpx;
|
||
line-height: 72rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: #A7A7A7;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.monthDateList
|
||
{
|
||
padding: 0 38rpx;
|
||
.item
|
||
{
|
||
margin-bottom: 12rpx;
|
||
width: calc(100%/7);
|
||
.date
|
||
{
|
||
background-color: #f8f8f8;
|
||
width: calc(100% - 10rpx);
|
||
line-height: 64rpx;
|
||
border-radius: 15rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #2A2A2A;
|
||
text-align: center;
|
||
}
|
||
.date.select
|
||
{
|
||
background-color: #F2C367;
|
||
color: white;
|
||
}
|
||
.date.notCurrentMonth
|
||
{
|
||
background-color: #FCFCFC;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
.quickTimeC
|
||
{
|
||
margin-top: 16rpx;
|
||
.item
|
||
{
|
||
margin-right: 25rpx;
|
||
width: 120rpx;
|
||
line-height: 56rpx;
|
||
border-radius: 30rpx;
|
||
border: solid 2rpx #4E4E4E;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #4E4E4E;
|
||
text-align: center;
|
||
}
|
||
.item:last-child
|
||
{
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
.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>
|