<template>
|
<div class="home">
|
<div class="homebox" v-if="isloading" @scroll.passive="scroll($event)" id="saveImgAll" ref="imageTofile">
|
<!-- <van-sticky v-if="stickToggle" style="position:relative;">
|
<div class="stick">{{ dataInfo.BasicInfo.CompanyName }} {{ dataInfo.BasicInfo.StockCode }}
|
<span class="btn pointer" style="position:absolute;right:110px" @click="saveImg()">保存图片</span>
|
<span class="right pointer" @click="toSearch()">更换企业</span>
|
</div>
|
</van-sticky> -->
|
<van-notify v-model="notifyShow" type="success" class="notify">
|
<van-icon name="bell" style="margin-right: 4px;" />
|
<span>图片正在下载，请稍后......</span>
|
</van-notify>
|
<div class="head">
|
<p class="flag fontColor">一图看懂</p>
|
<p class="name">{{ dataInfo.BasicInfo.CompanyName }} | {{ dataInfo.BasicInfo.StockCode }}</p>
|
<p class="times">{{ dataInfo.BasicInfo.Title }}</p>
|
<p class="btn pointer" style="margin-right:100px;" @click="saveImg()">保存图片</p>
|
<p class="btn pointer" @click="toSearch()">更换企业</p>
|
</div>
|
<div class="contentbox">
|
<div class="content">
|
<div class="section">
|
<div class="title bgColor">
|
<span>01</span>
|
<span>财务状况</span>
|
</div>
|
<div class="ball clearfix">
|
<div class="ring left bgColor">
|
<p class="icon"><i class="iconfont iconrenmingbi"></i></p>
|
<p class="money">
|
{{ dataInfo.BasicFinance.TotalRevenue }}{{
|
dataInfo.BasicFinance.TotalRevenueUnit
|
}}</p>
|
<p class="text">营业总收入</p>
|
</div>
|
<div class="ring right bgColor">
|
<p class="icon"><i class="iconfont icondiqiu"></i></p>
|
<p class="money">{{ dataInfo.BasicFinance.ROE }}{{ dataInfo.BasicFinance.ROEUnit }}</p>
|
<p class="text">净资产收益率</p>
|
</div>
|
<div class="line line1">
|
<p>归母净利润</p>
|
<p class="fontColor">{{
|
dataInfo.BasicFinance.MomProfit
|
}}{{ dataInfo.BasicFinance.MomProfitUnit }}</p>
|
</div>
|
<div class="line line2">
|
<p>扣非归母净利润</p>
|
<p class="fontColor">
|
{{ dataInfo.BasicFinance.NoMomProfit }}{{
|
dataInfo.BasicFinance.NoMomProfitUnit
|
}}</p>
|
</div>
|
</div>
|
</div>
|
<div class="section">
|
<div class="title bgColor">
|
<span>02</span>
|
<span>收入与利润</span>
|
</div>
|
<p class="sub-title fontColor">{{ dataInfo.IncomeProfits[0].Name }}</p>
|
<div class="income" style="width: 100%; height: 200px;"></div>
|
<p class="sub-title fontColor">{{ dataInfo.IncomeProfits[1].Name }}</p>
|
<div class="isincome" style="width: 100%; height: 200px;"></div>
|
<p class="sub-title fontColor">{{ dataInfo.IncomeProfits[2].Name }}</p>
|
<div class="notincome" style="width: 100%; height: 200px;"></div>
|
</div>
|
<div class="section">
|
<div class="title bgColor">
|
<span>03</span>
|
<span>营收构成</span>
|
</div>
|
<div class="makeup" :style="{ width: '100%', height: makeup.data.length > 0 ? '250px' : 0 }">
|
</div>
|
<div v-if="makeup.data.length == 0" style="width: 60px;margin: 12px auto;">
|
<img :src="img_kong" style="width: 60px;">
|
<span style="font-size: 15px;">暂无数据</span>
|
</div>
|
</div>
|
<div class="section">
|
<div class="title bgColor">
|
<span>04</span>
|
<span>盈利能力</span>
|
</div>
|
<div class="ability">
|
<div class="ability-item" v-for="(item1, index1) in dataInfo.Earningses">
|
<p class="ability-title bgColor">{{ item1.Title }}</p>
|
<ul class="list">
|
<li v-for="(item2, index2) in item1.EarningsPercents">
|
<div class="canvasbox">
|
<div class="canvas">
|
<van-circle v-model="item2.PercentAbs" :rate="item2.PercentAbs"
|
:speed="100" :text="item2.Percent + '%'" size="1.5rem"
|
:stroke-width="100" :clockwise="item2.PositiveFlag" color="#9b0707">
|
</van-circle>
|
</div>
|
</div>
|
<p class="text">{{ item2.Year }}</p>
|
</li>
|
</ul>
|
</div>
|
<div class="cost">
|
<ul class="costlist">
|
<li>
|
<p v-for="i in 4">
|
<span class="right"
|
:style="{ 'width': dataInfo.ExpenseRates[i - 1].ExpenseRatePercents[0].Percent + '%' }"></span>
|
</p>
|
</li>
|
<li>
|
<div class="percent" v-for="(item1, index1) in dataInfo.ExpenseRates">
|
<p class="pertext">{{ item1.ExpenseRatePercents[0].Percent }}%</p>
|
<p class="pertitle bgColor">{{ item1.Title }}</p>
|
<p class="pertext">{{ item1.ExpenseRatePercents[1].Percent }}%</p>
|
</div>
|
</li>
|
<li>
|
<p v-for="i in 4">
|
<span class="left"
|
:style="{ 'width': dataInfo.ExpenseRates[i - 1].ExpenseRatePercents[1].Percent + '%' }"></span>
|
</p>
|
</li>
|
</ul>
|
<div class="costyear">
|
<span class="left">{{ dataInfo.ExpenseRates[0].ExpenseRatePercents[0].Year }}</span>
|
<span class="right">{{
|
dataInfo.ExpenseRates[0].ExpenseRatePercents[1].Year
|
}}</span>
|
</div>
|
<p class="tips">注: 管理费用中不包含研发费用</p>
|
</div>
|
</div>
|
</div>
|
<div class="section">
|
<div class="title bgColor">
|
<span>05</span>
|
<span>偿债能力</span>
|
</div>
|
<div class="ability">
|
<div class="ability-item">
|
<p class="ability-title bgColor">{{ dataInfo.DebtReturns[0].Title }}</p>
|
<ul class="list pay" v-for="(item, index) in dataInfo.DebtReturns">
|
<li v-for="(item2, index2) in item.DebtPercents">
|
<div class="canvasbox">
|
<div class="canvas">
|
<van-circle v-model="item2.PercentAbs" :rate="item2.PercentAbs"
|
:speed="100" :text="item2.Percent + '%'" size="1.5rem"
|
:stroke-width="100" :clockwise="item2.PositiveFlag" color="#9b0707">
|
</van-circle>
|
</div>
|
</div>
|
<p class="text">{{ item2.Year }}</p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="section">
|
<div class="title bgColor">
|
<span>06</span>
|
<span>运营能力</span>
|
</div>
|
<ul class="runlist">
|
<li v-for="(item1, index1) in dataInfo.OperateCapabilities"
|
:class="index1 % 2 == 0 ? 'first' : 'second'">
|
<div class="icon" v-if="index1 % 2 == 0">
|
<img class="left" v-if="index1 == 0" src="../assets/images/b_yunying_1.png"
|
height="90%" alt="">
|
<img class="left" v-if="index1 == 2" src="../assets/images/b_yunying_3.png"
|
height="90%" alt="">
|
</div>
|
<div class="text">
|
<p class="runtitle fontColor">{{ item1.Title }}</p>
|
<div class="detail">
|
<a v-for="(item2, index2) in item1.OCPercents">{{ item2.Year }}
|
<span v-if="index1 == dataInfo.OperateCapabilities.length - 1"
|
class="fontColor">
|
{{ item2.Frequency ? `${item2.Frequency}亿` : '无相关数据' }}
|
</span>
|
<span v-if="index1 != dataInfo.OperateCapabilities.length - 1"
|
class="fontColor">
|
{{ item2.Frequency ? `${item2.Frequency}次` : '无相关数据' }}
|
</span>
|
</a>
|
</div>
|
</div>
|
<div class="icon" v-if="index1 % 2 == 1">
|
<img class="right" v-if="index1 == 1" src="../assets/images/b_yunying_2.png"
|
height="90%" alt="">
|
<img class="right" v-if="index1 == 3" src="../assets/images/b_yunying_4.png"
|
height="90%" alt="">
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="section">
|
<div class="title bgColor">
|
<span>07</span>
|
<span>{{ dataInfo.StockHolderInfo.Title }}</span>
|
</div>
|
<p class="noticeTime fontColor">
|
公告日期：<span>{{ dataInfo.StockHolderInfo.ReportDate }}</span>
|
截至日期：<span>{{ dataInfo.StockHolderInfo.FinalDate }}</span>
|
</p>
|
<ul class="share">
|
<li v-for="(item, index) in dataInfo.StockHolderInfo.StockHolderUnits">
|
<p class="sharetitle fontColor">{{ index + 1 }}，{{ item.CompanyName }}</p>
|
<div class="borderbox">
|
<div class="take" style="width: 40%;">
|
<div class="line bgColor" :style="{ 'width': item.Percent + '%' }"></div>
|
</div>
|
<div class="num" style="width: 45%;">
|
<span class="fontColor">{{ item.Percent }}% {{ item.Amount }}股</span>
|
</div>
|
<div class="num" style="width: 15%;">
|
<span class="fontColor" :style="{ color: item.AmountDiffColor }">{{
|
item.AmountDiffInfo
|
}}</span>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="section">
|
<div class="title bgColor">
|
<span>08</span>
|
<span>{{ dataInfo.StockHolderInfoFloat.Title }}</span>
|
</div>
|
<p class="noticeTime fontColor">
|
公告日期：<span>{{ dataInfo.StockHolderInfoFloat.ReportDate }}</span>
|
截至日期：<span>{{ dataInfo.StockHolderInfoFloat.FinalDate }}</span>
|
</p>
|
<ul class="share">
|
<li v-for="(item, index) in dataInfo.StockHolderInfoFloat.StockHolderUnits">
|
<p class="sharetitle fontColor">{{ index + 1 }}，{{ item.CompanyName }}</p>
|
<div class="borderbox">
|
<div class="take" style="width: 40%;">
|
<div class="line bgColor" :style="{ 'width': item.Percent + '%' }"></div>
|
</div>
|
<div class="num" style="width: 45%;">
|
<span class="fontColor">{{ item.Percent }}% {{ item.Amount }}股</span>
|
</div>
|
<div class="num" style="width: 15%;">
|
<span class="fontColor" :style="{ color: item.AmountDiffColor }">{{
|
item.AmountDiffInfo
|
}}</span>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="copyright">
|
<p class="copytitle">免责声明</p>
|
<p>
|
“上市公司微财报”中各项指标均来源于仁软智投研究院，具体内容以上市公司公告为准。在任何情况下上述内容并不构成对任何人的投资建议，未经仁软科技书面许可，任何机构或个人不得以任何形式复制、引用上述内容，否则由此造成的一切不良后果及法律责任由私自复制、引用者承担。
|
</p>
|
</div>
|
</div>
|
<p class="bottom"><a href="https://www.rensofter.com/index.html" style="color:white;">RenSoft@仁软科技</a></p>
|
|
</div>
|
<div class="homebox" v-if="!isloading">
|
|
<div class="loading">
|
<van-loading type="spinner" size="60px" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import html2canvas from 'html2canvas'
|
import { income, makeUp } from '@/assets/js/options.js'
|
import { makeupData, abilityYy } from '@/assets/js/basedata.js'
|
import { Sticky, Loading, Circle, Notify } from 'vant'
|
|
|
export default {
|
name: 'home',
|
components: {
|
Sticky,
|
Loading,
|
Notify,
|
'van-circle': Circle
|
},
|
data() {
|
return {
|
img_kong: require('../assets/images/kong.png'),
|
income: {}, // 营业收入及同比增速
|
isincome: {}, // 归母净利润及同比增速
|
notincome: {}, // 归母净利润及同比增速
|
makeup: { // 营收构成
|
charts: '',
|
data: []
|
},
|
ability: [
|
{ years: 2017, percent: -101 },
|
{ years: 2018, percent: 68 },
|
{ years: 2019, percent: 102 }
|
],
|
stickToggle: false,
|
isPc: null,
|
dataInfo: {},
|
isloading: false,
|
Percent: 0,
|
notifyShow: false
|
}
|
},
|
activated() {
|
let that = this
|
this.isPc = this.$util.IsPC()
|
let data = this.$route.query
|
console.log('数据', data);
|
this.getInfo(data)
|
},
|
deactivated() {
|
this.dataInfo = {}
|
this.isloading = false
|
sessionStorage.removeItem('param')
|
},
|
methods: {
|
//保存图片
|
saveImg() {
|
// this.$Message.success("图片正在下载,请稍等");
|
// Notify({
|
// message: '图片正在下载,请稍等',
|
// color: '#000',
|
// background: '#fff',
|
// });
|
this.notifyShow = true;
|
setTimeout(() => {
|
this.notifyShow = false;
|
}, 2000);
|
html2canvas(document.querySelector("#saveImgAll")).then((canvas) => {
|
var url = canvas.toDataURL();
|
let a = document.createElement("a");
|
document.body.appendChild(a);
|
a.href = url;
|
let name = this.dataInfo.BasicInfo.CompanyName+this.dataInfo.BasicInfo.Title+'('+ this.dataInfo.BasicInfo.StockCode +')';
|
// let imgName = localStorage.getItem('imgName')
|
a.download = `${name}.jpg`;
|
a.click();
|
a = null;
|
});
|
},
|
toSearch: function () {
|
this.$router.go(-1)
|
},
|
scroll: function (event) {
|
// 滚动条距离底部的距离scrollBottom
|
let scrollBottom = event.target.scrollTop
|
if (this.isPc) {
|
if (scrollBottom >= 400) {
|
this.stickToggle = true
|
} else {
|
this.stickToggle = false
|
}
|
} else {
|
if (scrollBottom >= 200) {
|
this.stickToggle = true
|
} else {
|
this.stickToggle = false
|
}
|
}
|
// console.log('滚动的什么啊', scrollBottom, this.stickToggle);
|
},
|
drawMap: function (id, _data, type) {
|
_data.charts = this.$echarts.init(document.getElementsByClassName(id)[0])
|
if (type == 1) {
|
_data.charts.setOption(income(_data.Titles, _data.Year, _data.Cash, _data.Percent))
|
} else if (type == 2) {
|
_data.charts.setOption(makeUp(_data.data))
|
}
|
},
|
getInfo: function (param) {
|
console.log(param);
|
let that = this
|
let paramsData = {}
|
if (param.id) {
|
paramsData = {
|
CompanyId: param.id,
|
ReportType: param.type
|
}
|
} else {
|
paramsData = {
|
CompanyId: 0,
|
ReportType: param.ReportType,
|
TSCode: param.TSCode
|
}
|
}
|
// console.log(paramsData);
|
that.$axios.post('/chinastock/GetchinastockDetail', paramsData).then(function (res) {
|
// console.log(res.data.Data);
|
that.isloading = true
|
let data = res.data.Data
|
that.dataInfo = data
|
|
// debugger
|
// document.title = that.dataInfo.BasicInfo.CompanyName + '微财报免费版'
|
that.makeup.data = makeupData(data.RevenueComponent.RevenuePercents)
|
that.$nextTick(function () {
|
that.drawMap('income', data.IncomeProfits[0].CashPercent, 1)
|
that.drawMap('isincome', data.IncomeProfits[1].CashPercent, 1)
|
that.drawMap('notincome', data.IncomeProfits[2].CashPercent, 1)
|
that.drawMap('makeup', that.makeup, 2)
|
// 运行能力
|
abilityYy(that.dataInfo.OperateCapabilities)
|
})
|
}).catch(function (err) {
|
console.log('请求失败之后', err)
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="less" scoped="scoped">
|
.home {
|
.homebox {
|
// height: ;
|
overflow: auto;
|
|
.loading {
|
margin-top: 200px;
|
height: 120px;
|
width: 100%;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
text-align: center;
|
}
|
}
|
|
/deep/ .van-sticky--fixed {
|
max-width: 650px;
|
margin: auto;
|
}
|
|
/deep/ .van-overlay {
|
max-width: 650px;
|
right: 0;
|
margin: auto;
|
}
|
|
/deep/ .van-loading__spinner--spinner i {
|
color: #b30808;
|
}
|
|
.stick {
|
height: 40px;
|
padding: 7px 15px;
|
background-color: #9b0707;
|
color: #fff;
|
line-height: 26px;
|
font-size: 16px;
|
|
span {
|
background: rgba(255, 255, 255, .2);
|
display: inline-block;
|
width: 80px;
|
height: 26px;
|
line-height: 26px;
|
text-align: center;
|
border-radius: 13px;
|
font-size: 14px;
|
color: #fff;
|
}
|
}
|
|
.head {
|
height: 3.6rem;
|
background-image: url(../assets/images/logo1.png);
|
background-size: 2.6rem;
|
padding: 1.2rem 15px 0;
|
background-color: #b30808;
|
background-position: 15px 0.2rem;
|
background-repeat: no-repeat;
|
position: relative;
|
|
.flag {
|
display: inline-block;
|
height: 18px;
|
line-height: 18px;
|
width: auto;
|
padding: 0 10px;
|
background-color: #fff;
|
letter-spacing: 5px;
|
}
|
|
.name {
|
height: .8rem;
|
line-height: .8rem;
|
font-size: 0.5rem;
|
color: #fff;
|
font-weight: 700;
|
}
|
|
.times {
|
height: 1rem;
|
line-height: 1rem;
|
font-size: 0.6rem;
|
color: #fff;
|
font-weight: 700;
|
}
|
|
.btn {
|
display: inline-block;
|
background: rgba(255, 255, 255, .2);
|
width: 80px;
|
height: 26px;
|
line-height: 26px;
|
text-align: center;
|
border-radius: 13px;
|
font-size: 14px;
|
color: #fff;
|
position: absolute;
|
right: 15px;
|
top: 15px;
|
}
|
}
|
|
.contentbox {
|
padding: 15px;
|
background-color: #b30808;
|
|
.content {
|
background-color: #f5f5f5;
|
padding: 15px;
|
}
|
}
|
|
.section {
|
margin-bottom: 50px;
|
|
&:nth-last-of-type(1) {
|
margin-bottom: 0;
|
}
|
|
.title {
|
display: inline-block;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
width: auto;
|
padding: 0 20px;
|
border-radius: 15px;
|
|
span {
|
font-size: 18px;
|
font-weight: 700;
|
color: #fff;
|
}
|
|
span:nth-child(1) {
|
border-right: 1px solid #fff;
|
padding-right: 10px;
|
}
|
|
span:nth-child(2) {
|
padding-left: 10px;
|
}
|
}
|
|
.ball {
|
margin-top: 1rem;
|
position: relative;
|
|
.ring {
|
height: 2rem;
|
width: 2rem;
|
border-radius: 50%;
|
text-align: center;
|
padding: .2rem 0;
|
|
.iconfont {
|
color: #fff;
|
font-size: .3rem;
|
}
|
|
p {
|
color: #fff;
|
}
|
|
p.icon {
|
line-height: 1;
|
}
|
|
p.money {
|
font-size: .4rem;
|
line-height: 1.8;
|
}
|
|
p.text {
|
font-size: 0.25rem;
|
line-height: 2;
|
}
|
}
|
|
.line {
|
display: inline-block;
|
position: absolute;
|
left: 2.3rem;
|
|
&::before {
|
content: "";
|
display: block;
|
position: absolute;
|
left: 0;
|
height: 1px;
|
background-color: #d2d2d2;
|
transform-origin: 0 0;
|
}
|
|
p:nth-child(2) {
|
font-size: 16px;
|
}
|
}
|
|
.line.line1 {
|
top: -.4rem;
|
|
&::before {
|
content: "";
|
display: block;
|
position: absolute;
|
left: 0rem;
|
bottom: -.02rem;
|
height: 1px;
|
width: .5rem;
|
background-color: #d2d2d2;
|
transform-origin: 0 0;
|
transform: rotate(135deg);
|
}
|
|
&::after {
|
content: "";
|
display: block;
|
position: absolute;
|
left: 0rem;
|
width: 1.8rem;
|
height: 1px;
|
background-color: #d2d2d2;
|
}
|
}
|
|
.line.line2 {
|
bottom: 0;
|
|
&::before {
|
width: .5rem;
|
bottom: -0.04rem;
|
left: -.2rem;
|
transform: rotate(-130deg);
|
}
|
|
&::after {
|
content: "";
|
display: block;
|
position: absolute;
|
left: -.2rem;
|
width: 2rem;
|
height: 1px;
|
background-color: #d2d2d2;
|
}
|
}
|
}
|
|
.sub-title {
|
text-align: center;
|
padding: 10px 0;
|
font-size: 16px;
|
}
|
|
.ability {
|
margin-top: 20px;
|
|
.ability-item:nth-last-of-type(1) {
|
margin-bottom: 0;
|
}
|
|
.ability-item {
|
width: 100%;
|
margin-bottom: 20px;
|
display: flex;
|
|
.ability-title {
|
width: 30px;
|
height: auto;
|
padding: 0 4px;
|
writing-mode: vertical-lr;
|
text-align: center;
|
font-size: 14px;
|
color: #fff;
|
letter-spacing: 2px;
|
}
|
|
.list.pay {
|
width: 100%;
|
}
|
|
.list {
|
width: calc(100% - 30px);
|
display: flex;
|
flex-wrap: wrap;
|
|
li:nth-child(3n) .canvasbox,
|
li:nth-last-of-type(1) .canvasbox {
|
border-right: none;
|
}
|
|
li {
|
flex: auto;
|
width: 33.33%;
|
height: 2rem;
|
|
.text {
|
line-height: 0.5rem;
|
text-align: center;
|
color: #999;
|
}
|
}
|
}
|
}
|
|
.canvasbox {
|
height: 1.5rem;
|
width: 100%;
|
border-right: 1px dashed #666;
|
|
.canvas {
|
height: 1.5rem;
|
width: 1.5rem;
|
margin: auto;
|
border-radius: 50%;
|
position: relative;
|
}
|
|
/deep/ .van-circle__text {
|
color: #9b0707;
|
}
|
|
.mask {
|
height: 1.5rem;
|
width: 1.5rem;
|
transform: rotate(-90deg);
|
position: absolute;
|
left: -7px;
|
top: -4px;
|
}
|
}
|
|
.cost {
|
margin-bottom: 20px;
|
|
.costlist {
|
display: flex;
|
|
li:nth-child(1),
|
li:nth-child(3) {
|
flex: 1;
|
padding-top: 3px;
|
|
p {
|
margin-bottom: 14px;
|
height: 12px;
|
overflow: hidden;
|
|
span {
|
background-image: linear-gradient(to right, #9b0707 70%, transparent 30%);
|
background-size: 10px 10px;
|
display: block;
|
height: 100%;
|
background-position: center center;
|
}
|
}
|
|
p:nth-last-of-type(1) {
|
margin-bottom: 0;
|
}
|
}
|
|
li:nth-child(2) {
|
width: 56%;
|
border-right: 1px dashed #ddd;
|
border-left: 1px dashed #ddd;
|
padding: 0 5px;
|
margin: 0 5px;
|
|
.percent {
|
display: flex;
|
padding: 2px 0;
|
}
|
|
p {
|
line-height: 20px;
|
}
|
|
.pertitle {
|
width: 45%;
|
text-align: center;
|
color: #fff;
|
margin: 0 5px;
|
}
|
|
.pertext {
|
flex: 1;
|
color: #9b0707;
|
}
|
|
.pertext:nth-child(1) {
|
text-align: right;
|
}
|
}
|
}
|
|
.costyear {
|
height: 20px;
|
|
span {
|
display: inline-block;
|
line-height: 20px;
|
width: calc(23% - 5px);
|
|
&:nth-child(1) {
|
text-align: right;
|
}
|
}
|
}
|
|
.tips {
|
color: #9b0707;
|
}
|
}
|
}
|
|
.runlist {
|
width: 100%;
|
|
li {
|
margin-top: 20px;
|
display: flex;
|
|
.icon {
|
width: 40%;
|
height: 90px;
|
|
img {
|
margin-top: 10px;
|
}
|
}
|
|
.text {
|
width: 60%;
|
height: 100%;
|
background-color: #fff;
|
padding: 5px 0 5px 10px;
|
|
.runtitle {
|
height: 15px;
|
font-weight: bold;
|
line-height: 15px;
|
}
|
|
.detail {
|
line-height: 75px;
|
overflow: hidden;
|
|
a {
|
display: block;
|
margin-right: 5px;
|
height: 25px;
|
line-height: 25px;
|
|
span:nth-child(1) {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
}
|
|
// a:nth-child(1) {
|
// display: block;
|
|
// }
|
}
|
}
|
}
|
|
li.first {
|
.text {
|
border-left: 5px solid #9b0707;
|
}
|
}
|
|
li.second {
|
.text {
|
border-right: 5px solid #9b0707;
|
}
|
}
|
}
|
|
.noticeTime {
|
line-height: 30px;
|
}
|
|
.share {
|
width: 100%;
|
|
li:nth-last-of-type(1) {
|
border-bottom: none;
|
}
|
|
li {
|
width: 100%;
|
border-bottom: 1px dashed #ddd;
|
padding: 5px 0;
|
|
.borderbox {
|
margin-top: 5px;
|
display: flex;
|
|
.take {
|
width: 55%;
|
height: 0.2rem;
|
padding: 0.04rem;
|
border: 1px solid #9b0707;
|
border-radius: 0.12rem;
|
|
.line {
|
height: 100%;
|
border-radius: 4px;
|
}
|
}
|
|
.num {
|
width: 45%;
|
position: relative;
|
bottom: 3px;
|
|
span:nth-child(1) {
|
margin: 0 5px;
|
}
|
|
.iconfont {
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.copyright {
|
padding: 10px 0;
|
|
p {
|
color: #fff;
|
}
|
|
.copytitle {
|
font-size: 14px;
|
line-height: 2;
|
}
|
}
|
|
.bottom {
|
text-align: center;
|
background-color: #9b0707;
|
color: #fff;
|
}
|
}
|
|
.pointer {
|
cursor: pointer;
|
}
|
|
.notify {
|
margin-top:20px;
|
width: 200px;
|
border-radius: 18px;
|
margin-left: calc(50% - 125px);
|
color: rgb(51, 32, 216);
|
background-color: #ffffff;
|
// background: rgba(255, 255, 255, 0.4);
|
// opacity: 0.4;
|
}
|
</style>
|
