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.

1336 lines
36 KiB

<template>
<u-loading-page v-if="load" :loading="load"></u-loading-page>
<view class="home" v-else>
<view class="center">
<view class="nav">
<view>
<text :class="{ nav_select: isMarket }" @tap="isMarket = true">
大盘信息
</text>
<text :class="{ nav_select: !isMarket }" @tap="isMarketNav">
个股信息
</text>
</view>
<view class="date" v-if="isMarket">
<image
src="../../static/home_left.png"
class="date_icon"
mode="scaleToFill"
@tap="beforeDay(date)"
/>
<input
type="text"
v-model="date"
disabled
class="ipt_date"
@tap="selectDate"
/>
<image
src="../../static/home_right.png"
class="date_icon"
mode="scaleToFill"
@tap="afterDay(date)"
/>
</view>
</view>
</view>
<view class="main">
<!-- 大盘信息 -->
<view v-if="isMarket">
<view class="market_head">
<view
@tap="toMarketDetail(item)"
class="indicators_box"
v-for="(item, index) in indicatorsList"
:key="index"
>
<view class="indcators_num">
{{ item.totalAmount }}
</view>
<view class="indcators_name">
{{ item.securityName }}
</view>
<view class="indcators_footer">
<text class="indcators_rose">涨{{ item.riseNum }}家</text>
<text style="color: #999999">平{{ item.equalNum }}家</text>
<text class="indcators_fell">跌{{ item.lossesNum }}家</text>
</view>
</view>
<view class="indicators_box" @tap="toAllMarket">
<view class="indicators_all" style="font-weight: bold">
{{ AllMarketData.securityName }}
</view>
<view class="indcators_footer indcators_footer1">
<text class="indcators_rose"
>涨{{ AllMarketData.riseNum }}家</text
>
<text style="color: #999999">
平{{ AllMarketData.equalNum }}家
</text>
<text class="indcators_fell">
跌{{ AllMarketData.lossesNum }}家
</text>
</view>
</view>
</view>
<view class="market_line"></view>
<view class="market_module" @tap="toModuleDateil">
<view class="market_module_text">趋势板块</view>
<view class="market_module_right">
<view>查看所有</view>
<image
src="../../static/right_all.png"
style="width: 24rpx; height: 24rpx"
mode="scaleToFill"
/>
</view>
</view>
<view class="trend_box">
<view class="trend_box_left">
<view
class="trend"
:class="{ trend1: item.is }"
v-for="(item, index) in trendList"
:key="index"
@tap.stop="selectTrend(item.name)"
>
{{ item.name }}
</view>
</view>
<image
src="../../static/home_sift.png"
class="trend_icon"
mode="scaleToFill"
@tap.stop="openSelectTrend"
/>
</view>
<view class="module_head">
<view>交易日期</view>
<view class="module_head_name">东财行业指数2级</view>
<view class="module_head_rank" @tap="marketRankSelect">
<view>板块排名</view>
<view class="module_head_icon" v-if="marketRank">
<image
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<image
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</view>
<view class="module_head_icon" v-else>
<image
src="../../static/shengxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
<image
src="../../static/jiangxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
</view>
</view>
</view>
<view v-if="moduleList.length > 0">
<view
class="module_list"
v-for="(item, index) in moduleList"
:key="index"
@tap="
toTrendDetail(
item.securityName,
item.securityCode,
item.securityType
)
"
>
<view class="module_list_date">{{ item.businessDate }}</view>
<view class="module_list_name">{{ item.securityName }}</view>
<view class="module_list_ranking">
<view>
{{ item.sort }}
</view>
<view class="list_ranking_right">
<image
v-if="item.sortChange > 0"
src="../../static/home_paiming_shangsheng.png"
class="module_list_icon"
mode="scaleToFill"
/>
<image
v-if="item.sortChange < 0"
src="../../static/home_paiming_xiajiang.png"
class="module_list_icon"
mode="scaleToFill"
/>
<u-icon
name="minus"
v-if="item.sortChange == 0"
size="12"
></u-icon>
<view
v-if="item.sortChange != 0"
class="rise_decline"
:style="{ color: item.color }"
>
{{ Math.abs(item.sortChange) }}
</view>
</view>
</view>
</view>
</view>
<view v-else>
<u-empty
mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"
marginTop="50"
>
</u-empty>
</view>
</view>
<!-- 个股信息 -->
<view v-else>
<view class="private_info">
<view class="private_serch" @tap="toSerch">
<view class="private_serch_left">
<u-icon name="search" size="20"></u-icon>
<input
type="text"
placeholder="请输入个股代码/名称/板块"
class="private_serch_ipt"
style="margin-left: 8rpx"
/>
</view>
<view>搜索</view>
</view>
<view class="private_screening">
<view class="private_screening_list" @tap="PrivateMarket">
<view>{{ currentMarket }}</view>
<image
src="../../static/jiangxu_false.png"
class="private_screening_icon"
mode="scaleToFill"
/>
</view>
<!-- <view class="private_screening_list" @tap="PrivatePlate">
<view>{{ currentPlate }}</view>
<image
src="../../static/jiangxu_false.png"
class="private_screening_icon"
mode="scaleToFill"
/>
</view> -->
<view class="private_screening_list" @tap="PrivatePrice">
<view>{{ currentPrice }}</view>
<image
src="../../static/jiangxu_false.png"
class="private_screening_icon"
mode="scaleToFill"
/>
</view>
</view>
<view class="private_table_head">
<view class="private_table_head_left">
<view class="private_head_name">股票名称</view>
<view class="private_head_price">价格</view>
<view class="private_head_gains">涨幅</view>
</view>
<view class="private_table_head_right">
<!-- @tap="privateBelong" -->
<!-- <view>{{ currentBelong }}</view> -->
<view>所属板块</view>
<!-- <image
src="../../static/jiangxu_false.png"
class="private_screening_icon"
mode="scaleToFill"
/> -->
</view>
</view>
<view v-if="privateList.length > 0">
<view
class="private_table_list"
v-for="(item, index) in privateList"
:key="index"
@tap="toPrivateDetail(item.securityName, item.securityCode)"
>
<view class="private_table_list_left">
<view class="table_list_name">
<view>{{ item.securityName }}</view>
<view class="table_list_code">{{ item.securityCode }}</view>
</view>
<view class="table_list_price">
<span
v-if="item.riseLossesCurrentDay > 0"
style="color: #d9001b"
>{{ item.closingPrice }}</span
>
<span v-else style="color: #6fbb60">{{
item.closingPrice
}}</span>
</view>
<view class="table_list_gains">
<span
v-if="item.riseLossesCurrentDay > 0"
style="color: #d9001b"
>
{{ item.riseLossesCurrentDay.toFixed(2) }}%
</span>
<span v-else style="color: #6fbb60"
>{{ item.riseLossesCurrentDay.toFixed(2) }}%</span
>
</view>
</view>
<view>{{ item.dongCaiIndustryIndexCode2 }}</view>
</view>
</view>
<view v-else>
<u-empty
mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"
marginTop="50"
>
</u-empty>
</view>
</view>
</view>
</view>
<!-- 选择时间 -->
<u-datetime-picker
:show="dateShow"
v-model="date"
mode="date"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
@cancel="cancelDate"
@confirm="confirmDate"
></u-datetime-picker>
<!-- 趋势板块筛选弹出层 -->
<u-popup :show="trendShow" mode="bottom" :round="8">
<view>
<view class="trend_show_nav">
<view @tap="closeTrendShow"></view>
<view @tap="confirmTrendShow"></view>
</view>
<view class="trend_show_main">
<view style="font-weight: bold">筛选类型</view>
<view>
<view class="trend_show_left">
<view
class="show_trend"
:class="{ trend1: item.is }"
v-for="(item, index) in showTrendList"
:key="index"
@tap="selectShowTrend(item.name)"
>
{{ item.name }}
</view>
</view>
</view>
<view class="show_ranking_num">排名展示数量</view>
<view style="margin-top: 24rpx">
<u-input
placeholder="请输入展示数量"
border="surround"
v-model="trendShowNum"
fontSize="24rpx"
></u-input>
</view>
</view>
</view>
</u-popup>
<!-- 个股筛选大盘 -->
<u-picker
:show="showPrivateMarket"
:columns="columnsMarket"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
keyName="name"
@cancel="cancelPrivateMarket"
@confirm="confirmPrivateMarket"
></u-picker>
<!-- 个股筛选板块 -->
<u-picker
:show="showPrivatePlate"
:columns="columnsPlate"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
@cancel="cancelPrivatePlate"
@confirm="confirmPrivatePlate"
></u-picker>
<!-- 个股筛选价格 -->
<u-picker
:show="showPrivatePrice"
:columns="columnsPrice"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
@cancel="cancelPrivatePrice"
@confirm="confirmPrivatePrice"
></u-picker>
<!-- 个股所属板块 -->
<u-picker
:show="showPrivateBelong"
:columns="columnsBelong"
cancelColor="#EC7C00"
confirmColor="#EC7C00"
@cancel="cancelPrivateBelong"
@confirm="confirmPrivateBelong"
></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
AllMarketData: {},
// 个股所属板块
showPrivateBelong: false,
currentBelong: '所属板块',
columnsBelong: [['所属板块', '成交量']],
// 个股筛选价格
showPrivatePrice: false,
currentPrice: '全部价格',
columnsPrice: [['全部价格', '价格升序', '价格降序']],
// 个股筛选板块
showPrivatePlate: false,
currentPlate: '全部板块',
columnsPlate: [
['全部板块', '上证指数', '深证指数', '创业板', '科创板'],
],
// 个股筛选大盘
showPrivateMarket: false,
currentMarket: '全部大盘',
currentMarketId: '',
columnsMarket: [
// ['全部板块', '上证指数', '深证指数', '创业板', '科创板'],
[
{ name: '全部大盘', current: '' },
{ name: '上证指数', current: 'SH' },
{ name: '深证指数', current: 'SZ' },
{ name: '创业板', current: '30' },
{ name: '科创版', current: '688' },
],
],
// 展示数量
trendShowNum: '',
// 趋势筛选
trendShow: false,
// 时间选择
dateShow: false,
// 大盘信息or个股信息
isMarket: true,
// 板块列表排名升序or降序
marketRank: true,
// 趋势选择
trendList: [
{
name: '当日趋势',
is: true,
current: 1,
},
{
name: '5日趋势',
is: false,
current: 5,
},
{
name: '10日趋势',
is: false,
current: 10,
},
{
name: '15日趋势',
is: false,
current: 15,
},
],
// 弹出层趋势选择
showTrendList: [
{
name: '当日趋势',
is: true,
current: 1,
},
{
name: '5日趋势',
is: false,
current: 5,
},
{
name: '10日趋势',
is: false,
current: 10,
},
{
name: '15日趋势',
is: false,
current: 15,
},
{
name: '20日趋势',
is: false,
current: 20,
},
{
name: '30日趋势',
is: false,
current: 30,
},
],
trendCurrent: 1,
date: '',
indicatorsList: [
// {
// name: '上证指数',
// num: '3270.54',
// zhang: '10',
// ping: '15',
// die: '20',
// },
// {
// name: '深证指数',
// num: '3270.54',
// zhang: '10',
// ping: '15',
// die: '20',
// },
// {
// name: '创业板',
// num: '3270.54',
// zhang: '10',
// ping: '15',
// die: '20',
// },
// {
// name: '科创版',
// num: '3270.54',
// zhang: '10',
// ping: '15',
// die: '20',
// },
],
// 趋势板块
moduleList: [
{
date: '2023-03-14',
name: '半导体',
ranking: '1',
riseOrDecline: 2,
state: 3,
},
{
date: '2023-03-14',
name: '电子设备制造',
ranking: '1',
riseOrDecline: 2,
state: 1,
},
{
date: '2023-03-14',
name: '电子设备制',
ranking: '1',
riseOrDecline: 3,
state: 2,
},
],
// 个股信息
privateList: [
{
name: '长城汽车',
code: '601633',
price: '33.21',
gains: '10%',
suoshu: '电子设备制造',
},
{
name: '长城汽车',
code: '601633',
price: '33.21',
gains: '10%',
suoshu: '电子设备制造',
},
{
name: '长城汽车',
code: '601633',
price: '33.21',
gains: '10%',
suoshu: '电子设备制造',
},
],
sortWay: '',
last_page: null,
pagenum: 1,
load: true,
}
},
onLoad(options) {
this.date = this.getTime(Date.parse(new Date()))
// 请求当前页面数据
this.isMarket ? this.marketRending() : this.isMarketNav()
// this.getModuleList()
},
onReachBottom() {
if (!this.isMarket) {
if (this.pagenum < this.last_page) {
this.getnewGoods()
}
}
},
methods: {
// 个股信息数据
isMarketNav() {
this.isMarket = false
this.$api
.post('/stock/originalIssueStockDetail', {
businessDate: '',
keyWord: '',
market: '',
pageModel: {
pageNo: this.pagenum,
pageSize: 20,
sortField: '',
sortWay: '',
},
})
.then(r => {
if (r) {
// this.data = r
this.privateList = r.list
this.last_page = r.totalPage
}
})
.catch(fall => {
console.log(fall)
})
},
isMarketNav1() {
this.isMarket = false
this.$api
.post('/stock/originalIssueStockDetail', {
businessDate: '',
keyWord: '',
market: '',
pageModel: {
pageNo: this.pagenum,
pageSize: 20,
sortField: '',
sortWay: '',
},
})
.then(r => {
if (r) {
// this.data = r
this.privateList = [...this.privateList, ...r.list]
this.last_page = r.totalPage
}
})
.catch(fall => {
console.log(fall)
})
},
getnewGoods() {
this.pagenum = this.pagenum + 1
// 1.展示loading效果
uni.showLoading({
title: '数据加载中...',
})
// 2.开启节流阀
this.isLoading = true
// 3.发起网络请求
this.isMarketNav1()
// 无论成功与否都会调用该方法
// 4.隐藏loading效果
uni.hideLoading()
// 5.关闭节流阀
this.isLoading = false
},
// 获取趋势板块列表
getModuleList() {
console.log(1)
this.$api
.post('/stock/trendPlate', {
businessDate: this.date,
pageModel: {
pageNo: 1,
pageSize: 10,
sortField: 'sort',
sortWay: this.marketRank ? 'asc' : 'desc',
},
trendType: this.trendCurrent,
})
.then(r => {
if (r) {
// this.data = r
this.moduleList = r.list
console.log(r)
}
})
.catch(fall => {
console.log(fall)
})
},
// 大盘信息板块列表排名选择
marketRankSelect() {
this.marketRank = !this.marketRank
this.$api
.post('/stock/trendPlate', {
businessDate: this.date,
pageModel: {
pageNo: 1,
pageSize: 10,
sortField: 'sort',
sortWay: this.marketRank ? 'asc' : 'desc',
},
trendType: this.trendCurrent,
})
.then(r => {
if (r) {
// this.data = r
this.moduleList = r.list
console.log(r)
}
})
.catch(fall => {
console.log(fall)
})
},
// 格式化时间戳
getTime(date) {
let time = new Date(date)
let y = time.getFullYear()
let m = time.getMonth() + 1
let d = time.getDate()
let h = time.getHours()
let mm = time.getMinutes()
let s = time.getSeconds()
if (s < 10) {
s = '0' + s
}
if (h < 10) {
h = '0' + h
}
if (mm < 10) {
mm = '0' + mm
}
if (m < 10) {
m = '0' + m
}
if (d < 10) {
d = '0' + d
}
return `${y}-${m}-${d}`
},
// 前一日
beforeDay(date) {
this.date = this.getTime(new Date(date).getTime() - 24 * 60 * 60 * 1000)
this.marketRending()
// this.getModuleList()
},
// 后一日
afterDay(date) {
this.date = this.getTime(new Date(date).getTime() + 24 * 60 * 60 * 1000)
this.marketRending()
// this.getModuleList()
},
// 打开时间选择器
selectDate() {
this.dateShow = true
uni.hideTabBar({})
},
// 关闭时间选择器
cancelDate() {
this.dateShow = false
uni.showTabBar({})
},
// 确认当前选中时间
confirmDate(e) {
this.$nextTick(() => {
this.date = this.getTime(e.value)
this.marketRending()
// this.getModuleList()
})
this.dateShow = false
uni.showTabBar({})
},
// 选择趋势
selectTrend(name) {
this.trendList.forEach(item => {
if (item.name === name) {
item.is = true
this.trendCurrent = item.current
this.getModuleList()
} else {
item.is = false
}
})
},
// 选择弹出层趋势
selectShowTrend(name) {
this.showTrendList.forEach(item => {
if (item.name === name) {
item.is = true
this.trendCurrent = item.current
} else {
item.is = false
}
})
},
// 打开趋势筛选弹出层
openSelectTrend() {
uni.hideTabBar({})
this.trendShow = true
},
// 取消选择趋势弹出层
closeTrendShow() {
this.trendShow = false
uni.showTabBar({})
},
// 确认选择趋势
confirmTrendShow() {
this.$api
.post('/stock/trendPlate', {
businessDate: this.date,
pageModel: {
pageNo: 1,
pageSize: this.trendShowNum,
sortField: 'sort',
sortWay: this.marketRank ? 'asc' : 'desc',
},
trendType: this.trendCurrent,
})
.then(r => {
if (r) {
this.moduleList = r.list
// this.data = r
console.log(r)
}
})
.catch(fall => {
console.log(fall)
})
this.trendShow = false
uni.showTabBar({})
},
// 请求大盘信息数据
marketRending() {
this.moduleList.forEach(item => {
item.state == 1 ? (item.color = '#D9001B') : (item.color = '#8FC320')
})
this.$api
.post('/stock/appRiseLossesStatistics', {
businessDate: this.date,
securityCode: '',
securityType: '',
})
.then(r => {
if (r) {
// this.data = r
let array = []
r.list.forEach(item => {
if (item.securityName == '全部股票') {
this.AllMarketData = item
} else {
array.push(item)
}
})
this.indicatorsList = array
this.load = false
console.log(r)
}
})
.catch(fall => {
console.log(fall)
})
this.getModuleList()
},
// 前往所有趋势板块详情页
toModuleDateil() {
uni.navigateTo({
url: `/pages/home/market/allTrendModule?date=${this.date}`,
})
},
// 前往大盘详情
toMarketDetail(item) {
uni.navigateTo({
url: `/subpkgA/marketIndex?name=${item.securityName}&date=${this.date}`,
})
},
// 前往全部大盘
toAllMarket() {
uni.navigateTo({
url: `/pages/home/market/allMarket`,
})
},
// 前往趋势详情页
toTrendDetail(name, id, type) {
uni.navigateTo({
url: `/pages/home/market/trendDetail?name=${name}&id=${id}&type=${type}&date=${this.date}`,
})
},
// 前往个股详情
toPrivateDetail(name, id) {
uni.navigateTo({
url: `/pages/home/private/privateDetail?name=${name}&id=${id}`,
})
},
//
//
//
//
//
// 前往搜索页
toSerch() {
uni.navigateTo({
url: `/pages/home/private/serch`,
})
},
// 打开个股筛选大盘弹出层
PrivateMarket() {
uni.hideTabBar({})
this.showPrivateMarket = true
},
// 取消个股筛选大盘弹出层
cancelPrivateMarket() {
this.showPrivateMarket = false
uni.showTabBar({})
},
// 确认个股筛选大盘
confirmPrivateMarket(e) {
console.log(e)
this.pagenum = 1
this.currentMarket = e.value[0].name
this.currentMarketId = e.value[0].current
this.$api
.post('/stock/originalIssueStockDetail', {
businessDate: '',
keyWord: '',
market: this.currentMarketId,
pageModel: {
pageNo: this.pagenum,
pageSize: 20,
sortField: this.sortWay ? 'sort' : '',
sortWay: this.sortWay,
},
})
.then(r => {
if (r) {
// this.data = r
this.privateList = r.list
console.log(this.privateList)
console.log(r)
}
})
.catch(fall => {
console.log(fall)
})
this.showPrivateMarket = false
uni.showTabBar({})
},
// 打开个股筛选板块弹出层
PrivatePlate() {
uni.hideTabBar({})
this.showPrivatePlate = true
},
// 取消个股筛选板块弹出层
cancelPrivatePlate() {
this.showPrivatePlate = false
uni.showTabBar({})
},
// 确认个股筛选板块
confirmPrivatePlate(e) {
this.currentPlate = e.value[0]
this.showPrivatePlate = false
uni.showTabBar({})
},
// 打开个股筛选价格弹出层
PrivatePrice() {
uni.hideTabBar({})
this.showPrivatePrice = true
},
// 取消个股筛选价格弹出层
cancelPrivatePrice() {
this.showPrivatePrice = false
uni.showTabBar({})
},
// 确认个股筛选价格
confirmPrivatePrice(e) {
this.pagenum = 1
this.currentPrice = e.value[0]
this.currentPrice == '价格升序'
? (this.sortWay = 'asc')
: (this.sortWay = 'desc')
this.$api
.post('/stock/originalIssueStockDetail', {
businessDate: '',
keyWord: '',
market: '',
pageModel: {
pageNo: this.pagenum,
pageSize: 20,
sortField: this.sortWay ? 'sort' : '',
sortWay: this.sortWay,
},
})
.then(r => {
if (r) {
// this.data = r
this.privateList = r.list
console.log(this.privateList)
console.log(r)
}
})
.catch(fall => {
console.log(fall)
})
this.showPrivatePrice = false
uni.showTabBar({})
},
// 打开个股所属模块弹出层
privateBelong() {
uni.hideTabBar({})
this.showPrivateBelong = true
},
// 取消个股所属模块弹出层
cancelPrivateBelong() {
this.showPrivateBelong = false
uni.showTabBar({})
},
// 确认个股所属模块
confirmPrivateBelong(e) {
this.currentBelong = e.value[0]
this.showPrivateBelong = false
uni.showTabBar({})
},
},
}
</script>
<style lang="scss" scoped>
.center {
padding: 0 24rpx;
.nav {
margin-top: 24rpx;
font-size: 24rpx;
color: #999999;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav text {
margin-right: 32rpx;
}
.nav_select {
font-weight: bold;
font-size: 32rpx;
color: #ec7c00;
}
}
.date {
display: flex;
align-items: center;
justify-content: flex-end;
.ipt_date {
width: 180rpx;
font-size: 24rpx;
text-align: center;
}
.date_icon {
width: 24rpx;
height: 24rpx;
}
}
.main {
padding: 24rpx;
}
.market_head {
margin-right: -24rpx;
display: flex;
flex-wrap: wrap;
.indicators_box {
margin-top: 18rpx;
width: 342rpx;
height: 216rpx;
border-radius: 12rpx;
background-color: #fffaf5;
text-align: center;
margin-right: 16rpx;
.indicators_all {
margin-top: 60rpx;
}
.indcators_num {
margin-top: 48rpx;
font-weight: bold;
}
.indcators_name {
font-size: 24rpx;
margin-top: 10rpx;
}
.indcators_footer {
font-size: 24rpx;
margin-top: 30rpx;
.indcators_rose {
color: #d9001b;
margin-right: 10rpx;
}
.indcators_fell {
color: #6fbb60;
margin-left: 20rpx;
}
}
.indcators_footer1 {
margin-top: 60rpx;
}
}
}
.market_line {
margin-top: 24rpx;
height: 20rpx;
width: 750rpx;
margin-left: -24rpx;
background-color: #f6f6f6;
}
.market_module {
margin-top: 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
.market_module_text {
font-weight: bold;
}
.market_module_right {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999999;
}
}
.trend_box {
margin-top: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
.trend_box_left {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999999;
.trend {
padding: 8rpx 20rpx;
border: 2rpx solid #999999;
border-radius: 8rpx;
margin-right: 24rpx;
}
.trend1 {
border-color: #ec7c00;
color: #ec7c00;
background-color: #fffcf9;
}
}
.trend_icon {
width: 34rpx;
height: 34rpx;
}
}
.trend_show_nav {
padding: 32rpx 24rpx;
border-bottom: 2rpx solid #f6f6f6;
font-size: 28rpx;
color: #ec7c00;
display: flex;
align-items: center;
justify-content: space-between;
}
.trend_show_main {
padding: 40rpx 24rpx;
.trend_show_left {
margin-right: -24rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 24rpx;
color: #999999;
.show_trend {
margin-top: 24rpx;
padding: 12rpx 30rpx;
border: 2rpx solid #999999;
border-radius: 8rpx;
margin-right: 20rpx;
}
.trend1 {
border-color: #ec7c00;
color: #ec7c00;
background-color: #fffcf9;
}
}
.show_ranking_num {
margin-top: 40rpx;
font-size: 32rpx;
}
}
.module_head {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24rpx;
font-size: 24rpx;
font-weight: bold;
padding: 20rpx 28rpx 20rpx 36rpx;
width: 686rpx;
margin-left: -24rpx;
background-color: #fff9f3;
.module_head_name {
margin-left: 64rpx;
}
.module_head_rank {
display: flex;
align-items: center;
}
.module_head_icon {
margin-left: 8rpx;
display: flex;
flex-direction: column;
.head_icon {
width: 18rpx;
height: 10rpx;
margin-top: 4rpx;
}
}
}
.module_list {
padding-top: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
.module_list_date {
}
.module_list_name {
width: 400rpx;
text-align: center;
}
.module_list_ranking {
display: flex;
align-items: center;
margin-right: 16rpx;
}
.list_ranking_right {
margin-left: 24rpx;
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
.rise_decline {
font-size: 24rpx;
margin-left: 4rpx;
}
}
.module_list_icon {
text-align: center;
width: 18rpx;
height: 10rpx;
line-height: 10rpx;
font-size: 28rpx;
color: #999999;
}
}
.private_serch {
padding: 24rpx 32rpx;
border: 2rpx solid #dedede;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
border-radius: 12rpx;
color: #ec7c00;
.private_serch_ipt {
width: 400rpx;
font-size: 24rpx;
}
.private_serch_left {
display: flex;
align-items: center;
}
}
.private_screening {
padding: 32rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
.private_screening_list {
display: flex;
align-items: center;
}
}
.private_screening_icon {
width: 18rpx;
height: 10rpx;
margin-left: 24rpx;
}
.private_table_head {
display: flex;
align-items: center;
font-size: 24rpx;
font-weight: bold;
background-color: #fff9f3;
margin-left: -24rpx;
margin-right: -24rpx;
padding: 20rpx 24rpx;
justify-content: space-between;
.private_table_head_right {
display: flex;
align-items: center;
}
.private_table_head_left {
display: flex;
align-items: center;
.private_head_name {
width: 200rpx;
}
.private_head_price {
width: 150rpx;
text-align: center;
}
.private_head_gains {
width: 150rpx;
text-align: center;
}
}
}
.private_table_list {
padding: 24rpx 0;
border-bottom: 2rpx solid #f6f6f6;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
.private_table_list_left {
display: flex;
align-items: center;
.table_list_name {
width: 200rpx;
}
.table_list_code {
margin-top: 10rpx;
font-size: 24rpx;
color: #999999;
}
.table_list_price {
width: 150rpx;
text-align: center;
}
.table_list_gains {
width: 150rpx;
text-align: center;
}
}
}
</style>