12.12 页面风格改版，增加事件详情相关概念网页跳转，增加绑定手机号功能
This commit is contained in:
尚政杰
@@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="详情"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||
<navBar leftText="事件详情" :hideNavBg="true"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||||
<view class="categoryC fixed" :style="'top:'+navH+'px;'">
|
||||
<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>
|
||||
</view>
|
||||
<view v-if="investDetails" class="contentC fixed" :style="'top:'+contentTop+'px;'">
|
||||
@@ -37,14 +36,31 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="selectCategory==4">
|
||||
<view v-if="selectCategory==3">
|
||||
<view class="conceptList">
|
||||
<view class="item relative" v-for="(item,index) in investDetails.extracted_concepts" :key="index" @click="clickConceptItem()">
|
||||
<image class="cover" :src="item.first_image" mode="aspectFill"></image>
|
||||
<view class="infoC absolute">
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="content relative">{{item.reason}}
|
||||
<text class="lookDetails absolute">查看详情</text>
|
||||
<view class="item" v-for="(item,index) in conceptList" :key="index">
|
||||
<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 class="stockList flex">
|
||||
<view class="stockItem" v-for="(sitem,sindex) in item.stocks.slice(0,3)" :key="sindex">{{sitem.stock_name}}</view>
|
||||
<view class="more" @click="clickStockMore(item)">+{{item.stock_count-3}}更多</view>
|
||||
</view>
|
||||
<!-- <view class="notVipC flex" @click="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="clickHistoricalTimeline(item)">
|
||||
<image class="icon" src="/static/icon/home/conceptCenter/timeAxis.png" mode="widthFix"></image>
|
||||
<view>历史时间轴</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -73,13 +89,13 @@
|
||||
{
|
||||
title:'全部股票',
|
||||
num:0,
|
||||
bgColor:'#C00000',
|
||||
bgColor:'#D82A2A',
|
||||
color:'white'
|
||||
},
|
||||
{
|
||||
title:'大周期',
|
||||
num:0,
|
||||
bgColor:'#305496',
|
||||
bgColor:'#3A5D9C',
|
||||
color:'white'
|
||||
},
|
||||
{
|
||||
@@ -163,6 +179,10 @@
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page
|
||||
{
|
||||
background-color: #070707;
|
||||
}
|
||||
.topBg
|
||||
{
|
||||
top: 0;
|
||||
@@ -172,9 +192,8 @@
|
||||
}
|
||||
.categoryC
|
||||
{
|
||||
background-color: white;
|
||||
margin-top: 10rpx;
|
||||
padding-top: 20rpx;
|
||||
padding: 20rpx 10rpx 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
@@ -182,33 +201,25 @@
|
||||
{
|
||||
display: inline-block;
|
||||
padding: 0 30rpx;
|
||||
line-height: 75rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 76rpx;
|
||||
font-size: 27rpx;
|
||||
font-weight: 500;
|
||||
color: #42485B;
|
||||
color: #939393;
|
||||
}
|
||||
.item.select
|
||||
{
|
||||
font-weight: bold;
|
||||
color: #F97316;
|
||||
.line
|
||||
{
|
||||
background-color: #F97316;
|
||||
left: calc((100% - 50rpx)/2);
|
||||
bottom: 0;
|
||||
width: 50rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
color: #F3C368;
|
||||
}
|
||||
}
|
||||
.contentC
|
||||
{
|
||||
background-color: white;
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// margin-top: 10rpx;
|
||||
// border-radius: 20rpx 20rpx 0 0;
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
margin: 0 25rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow-y: scroll;
|
||||
.former
|
||||
{
|
||||
@@ -221,12 +232,12 @@
|
||||
}
|
||||
.stockCategoryList
|
||||
{
|
||||
margin-top: 18rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
.item
|
||||
{
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
width: calc((100% - 40rpx)/3);
|
||||
margin: 0 30rpx 20rpx 0;
|
||||
width: calc((100% - 60rpx)/3);
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
.num
|
||||
@@ -292,44 +303,139 @@
|
||||
.conceptList
|
||||
{
|
||||
padding: 30rpx 25rpx;
|
||||
.item
|
||||
.item
|
||||
{
|
||||
margin-bottom: 20rpx;
|
||||
.cover
|
||||
background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
.titleChgStockNumC
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 350rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.infoC
|
||||
{
|
||||
background: linear-gradient(to bottom,#00000080,#000);
|
||||
padding: 20rpx 23rpx;
|
||||
left:0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
border-radius: ;
|
||||
color: white;
|
||||
padding: 24rpx 18rpx 0;
|
||||
.title
|
||||
{
|
||||
font-size: 26rpx;
|
||||
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
|
||||
{
|
||||
padding: 0 16rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content
|
||||
.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
|
||||
{
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
line-height: 1.2rem;
|
||||
.lookDetails
|
||||
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
|
||||
{
|
||||
right: 0;
|
||||
color: #F97316;
|
||||
margin-right: 7rpx;
|
||||
width: 20rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user