760 lines
21 KiB
Vue
760 lines
21 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<header-nav :index_num="index_num"></header-nav>
|
||
<div id="box">
|
||
<!-- 导航 -->
|
||
<div class="top">
|
||
<div class="span">
|
||
<span @click="btn(0)" :class="sub == 0 ? 'style' : ''">项目进度</span>
|
||
<span @click="btn(1)" :class="sub == 1 ? 'style' : ''">项目信息</span>
|
||
</div>
|
||
<div class="daochu" v-if="sub == 1" @click="download()">项目导出</div>
|
||
</div>
|
||
<!-- 进度 -->
|
||
<!-- <div class="img" v-if="sub == 0">
|
||
<img :src="imgUrl.tg" v-if="state == 0" />
|
||
<img :src="imgUrl.btg" v-if="state == 1" />
|
||
<img :src="imgUrl.shz" v-if="state == 2" />
|
||
<img :src="imgUrl.zxz" v-if="state == 3" />
|
||
</div>-->
|
||
<!-- 项目流程 -->
|
||
<div class="bobb" v-if="sub == 0">
|
||
<div class="left">
|
||
<div class="time">
|
||
<template v-for="(time,index) in zDate.date">
|
||
<span v-if="index < 5" :key="index">{{time}}</span>
|
||
</template>
|
||
</div>
|
||
<div class="jdt">
|
||
<!-- 已申报 -->
|
||
<img class="sx0" :src="imgUrl.sx0" alt />
|
||
<img class="d0" :src="imgUrl.d0" v-if="zDate.type != 0" />
|
||
<img class="d1" :src="imgUrl.d1" v-if="zDate.type == 0" />
|
||
<!-- 审核中 -->
|
||
<img class="sx1" :src="imgUrl.sx1" alt />
|
||
<img class="d0" :src="imgUrl.d0" v-if="zDate.type != 1" />
|
||
<img class="d1" :src="imgUrl.d1" v-if="zDate.type == 1" />
|
||
<!-- 审核通过 -->
|
||
<img class="sx1" :src="imgUrl.sx1" alt />
|
||
<img class="d0" :src="imgUrl.d0" v-if="zDate.type != 5" />
|
||
<img class="d1" :src="imgUrl.d1" v-if="zDate.type == 5" />
|
||
<!-- 评审中 -->
|
||
<img class="sx1" :src="imgUrl.sx1" alt />
|
||
<img class="d0" :src="imgUrl.d0" v-if="zDate.type != 6" />
|
||
<img class="d1" :src="imgUrl.d1" v-if="zDate.type == 6" />
|
||
<!-- 评审通过 -->
|
||
<img class="sx1" :src="imgUrl.sx1" alt />
|
||
<img class="d0" :src="imgUrl.d0" v-if="zDate.type != 10" />
|
||
<img class="d1" :src="imgUrl.d1" v-if="zDate.type == 10" />
|
||
<!-- end -->
|
||
<img class="sx1" :src="imgUrl.sx1" alt />
|
||
</div>
|
||
<div class="bb">
|
||
<div class="o">
|
||
<span>项目已申报</span>
|
||
<img class="oo" :src="imgUrl.d0" alt />
|
||
</div>
|
||
<div>
|
||
<span>初筛审核中</span>
|
||
<img class="oo" :src="imgUrl.d0" alt />
|
||
</div>
|
||
<div class="div-v">
|
||
<span>初筛审核通过</span>
|
||
<img class="oo" :src="imgUrl.d0" alt />
|
||
<section v-if="zDate.type === 5">
|
||
<span style="color:#e60012;font-size:20px;">总分: {{zDate.score}}分</span>
|
||
<span style="color:#999;font-size:16px;">（及格分数: 70）</span>
|
||
</section>
|
||
</div>
|
||
<div>
|
||
<span>立项评审中</span>
|
||
<img class="oo" :src="imgUrl.d0" alt />
|
||
</div>
|
||
<div>
|
||
<span>立项评审通过</span>
|
||
<img class="oo" :src="imgUrl.d0" alt />
|
||
<section v-if="zDate.type === 10">
|
||
<span style="color:#e60012;font-size:20px;">总分: {{zDate.score}}分</span>
|
||
<span style="color:#999;font-size:16px;">（及格分数: 70）</span>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<p>项目流程说明</p>
|
||
<ul>
|
||
<li v-for="(list,index) in text" :key="index">{{list}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 项目信息 -->
|
||
<div class="boxx" v-if="sub == 1" :class="popupStatus == true ? 'fliter' : ''" id="pdfDom">
|
||
<h3>一、基本信息</h3>
|
||
<div class="one-o">
|
||
<ul>
|
||
<li>项目名称：{{zData.name}}</li>
|
||
<li>项目申报单位：{{zData.company}}</li>
|
||
<li>项目类型：{{zData.tid}}</li>
|
||
<li>项目落地区域：{{zData.rid}}</li>
|
||
<li>一级项目方向：{{zData.first_level}}</li>
|
||
<li>二级项目方向：{{zData.secondary}}</li>
|
||
<li>项目服务领域：{{zData.fieldeara}}</li>
|
||
<li>项目有效期: {{zData.aterm + '至' + zData.fterm}}</li>
|
||
<li>申报单位属性：{{zData.attribute}}</li>
|
||
<li>通讯地址：{{zData.postaladdress}}</li>
|
||
<li>电子信箱：{{zData.pmail}}</li>
|
||
<li>传真电话：{{zData.fax_tel}}</li>
|
||
<li>邮政编码：{{zData.postalcode}}</li>
|
||
</ul>
|
||
<ul>
|
||
<li>法定代表人：{{zData.plegal}}</li>
|
||
<li>法人代码：{{zData.plcode}}</li>
|
||
<li>负责人姓名：{{zData.pname}}</li>
|
||
<li>职务：{{zData.poster}}</li>
|
||
<li>办公电话：{{zData.poffice_tel}}</li>
|
||
<li>手机：{{zData.aphone}}</li>
|
||
<li>联系人姓名：{{zData.cname}}</li>
|
||
<li>职务：{{zData.cpost}}</li>
|
||
<li>办公电话：{{zData.coffice_tel}}</li>
|
||
<li>手机：{{zData.cphone}}</li>
|
||
</ul>
|
||
<ul>
|
||
<li>项目主责单位：{{zData.prespo}}</li>
|
||
<li>通讯地址：{{zData.respoadd}}</li>
|
||
<li>邮政编码：{{zData.respopcode}}</li>
|
||
<li>传真电话：{{zData.respophone}}</li>
|
||
<li>电子信箱：{{zData.respomail}}</li>
|
||
<li>负责人姓名：{{zData.respopname}}</li>
|
||
<li>职务：{{zData.respopost}}</li>
|
||
<li>手机：{{zData.respoptel}}</li>
|
||
<li>办公电话：{{zData.respoophone}}</li>
|
||
<li>负责人姓名：{{zData.respocname}}</li>
|
||
<li>职务：{{zData.respocpost}}</li>
|
||
<li>办公电话：{{zData.respocophone}}</li>
|
||
<li>手机：{{zData.respoctel}}</li>
|
||
</ul>
|
||
</div>
|
||
<h3>二、申报单位简介:</h3>
|
||
<div class="one-e">
|
||
<p>{{zData.decldes}}</p>
|
||
</div>
|
||
<h3>三、项目简介</h3>
|
||
<div class="one-e">
|
||
<p>{{zData.prodes}}</p>
|
||
</div>
|
||
<h3>四、项目论证</h3>
|
||
<h4>(一) 项目实施的必要性、可行性</h4>
|
||
<div class="one-e">
|
||
<p>{{zData.prodemo}}</p>
|
||
</div>
|
||
<h4>(二) 项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间</h4>
|
||
<h5>1.项目实施的已有基础</h5>
|
||
<div class="one-e">
|
||
<p>{{zData.prodemojc}}</p>
|
||
</div>
|
||
<h5>2.具体方法和途径</h5>
|
||
<div class="one-e">
|
||
<p>{{zData.prodemotj}}</p>
|
||
</div>
|
||
<h5>3.进度安排</h5>
|
||
<div class="one-e">
|
||
<p>{{zData.prodemojd}}</p>
|
||
</div>
|
||
<h5>4.预期效果</h5>
|
||
<div class="one-e">
|
||
<p>{{zData.prodemoxg}}</p>
|
||
</div>
|
||
<h5>5.项目团队及分工</h5>
|
||
<div class="one-e">
|
||
<p>{{zData.prodemofg}}</p>
|
||
</div>
|
||
<h4>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h4>
|
||
<div class="one-e">
|
||
<p>{{zData.prodemotwo}}</p>
|
||
</div>
|
||
<h3>五、经费预算:</h3>
|
||
<div id="one_e" v-html="zData.funds">{{zData.funds}}</div>
|
||
<h3>六、申报单位承诺:</h3>
|
||
<div class="one-e">
|
||
<p>{{msg}}</p>
|
||
</div>
|
||
<h3>七、项目主责单位意见 :</h3>
|
||
<div class="one-e">
|
||
<p>
|
||
<span>
|
||
<a :href="dataFile[0].url" :download="dataFile[0].name">
|
||
<span>下载</span>
|
||
</a>
|
||
<!-- <a
|
||
@click="downloadTxt(zData.proimages,'fileName')"
|
||
>
|
||
<span>下载</span>
|
||
</a>-->
|
||
|
|
||
<span @click="preview()">预览</span>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<section id="preview" v-if="popupStatus">
|
||
<div class="tc" @click="preview()"></div>
|
||
<section class="tc-text">
|
||
<a
|
||
v-for="(list,index) in dataFile"
|
||
:key="index"
|
||
:href="list.url"
|
||
target="_blank"
|
||
>{{list.url}}</a>
|
||
</section>
|
||
<!-- <img class="tc-text" :src="zData.proimages" /> -->
|
||
</section>
|
||
</div>
|
||
<footer-nav class="footer" :class="popupStatus == true ? 'fliter' : ''"></footer-nav>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
/* eslint-disable */
|
||
import HeaderNav from "../../components/HeaderNav";
|
||
/* eslint-disable */
|
||
import FooterNav from "../../components/FooterNav";
|
||
var preD = function (e) {
|
||
e.preventDefault()
|
||
}
|
||
export default {
|
||
components: {
|
||
HeaderNav,
|
||
FooterNav
|
||
},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
index_num: 2,
|
||
sub: 0,
|
||
imgUrl: {
|
||
tg: require("../../../static/img/tg.png"),
|
||
btg: require("../../../static/img/btg.png"),
|
||
shz: require("../../../static/img/shz.png"),
|
||
zxz: require("../../../static/img/zxz.png"),
|
||
sx0: require("../../../static/img/sx0.png"),
|
||
sx1: require("../../../static/img/sx1.png"),
|
||
d0: require("../../../static/img/d0.png"),
|
||
d1: require("../../../static/img/d1.png")
|
||
},
|
||
msg: '我们确认项目申报内容的真实性,并愿意承担相应的责任',
|
||
state: 0,
|
||
zt: 2,
|
||
popupStatus: false,
|
||
text: [
|
||
"第一步：填写并提交项目申报书",
|
||
"第二步：线上初筛审核",
|
||
"第三步：项目初筛结果查询",
|
||
"第四步：线下立项评审",
|
||
"第五步：立项结果查询"
|
||
],
|
||
zData: [],
|
||
zDate: [],
|
||
dataFile: null,
|
||
id: Number,
|
||
fileName: null
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {
|
||
popupStatus(val) {
|
||
if (val) {
|
||
document.body.style.overflow = 'hidden'
|
||
document.addEventListener('touchmove', preD, {
|
||
passive: false
|
||
}) /** 禁止页面滑动 */
|
||
} else {
|
||
document.body.style.overflow = '' /**出现滚动条 */
|
||
document.removeEventListener('touchmove', preD, { passive: false })
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// downloadTxt(content, filename) {
|
||
// var eleLink = document.createElement('a');
|
||
// eleLink.download = filename;
|
||
// eleLink.style.display = 'none';
|
||
// // 字符内容转变成blob地址
|
||
// var blob = new Blob([content]);
|
||
// eleLink.href = URL.createObjectURL(blob);
|
||
// // 触发点击
|
||
// document.body.appendChild(eleLink);
|
||
// eleLink.click();
|
||
// // 然后移除
|
||
// document.body.removeChild(eleLink);
|
||
// window.location.href = o; // 本窗口打开下载
|
||
// window.open(centent, '_blank'); // 新开窗口下载
|
||
// },
|
||
download() {
|
||
this.getPdf('pdfDom', '项目申请书')
|
||
},
|
||
preview() {
|
||
this.popupStatus = !this.popupStatus
|
||
},
|
||
btn(index) {
|
||
let s = this.sub;
|
||
s = index;
|
||
this.sub = s;
|
||
},
|
||
getData() {
|
||
let _this = this
|
||
this.$http({
|
||
method: 'post',
|
||
url: 'v1/project/details',
|
||
data: {
|
||
id: _this.id
|
||
}
|
||
}).then(res => {
|
||
if (res.data.data.code === 200) {
|
||
_this.zData = res.data.data.data.ProjectDetails
|
||
_this.zDate = res.data.data.data.ProjectReview
|
||
let arr = JSON.parse(_this.zData.proimages)
|
||
let newArr = arr.map(element => {
|
||
return ({ name: element.name, url: element.url })
|
||
});
|
||
_this.dataFile = newArr
|
||
console.log(_this.dataFile);
|
||
// let index = _this.zData.proimages.lastIndexOf("\/")
|
||
// _this.fileName = _this.zData.proimages.substring(index+1,_this.zData.proimages.length)
|
||
} else {
|
||
alert('请求失败！')
|
||
}
|
||
})
|
||
// eslint-disable-next-line handle-callback-err
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.id = this.$route.params.id;
|
||
this.getData()
|
||
},
|
||
mounted() { },
|
||
// beforeUpdate() {
|
||
// localStorage.setItem('schedule', this.id)
|
||
// },
|
||
// beforeDestroy() {
|
||
// localStorage.setItem('schedule', this.id)
|
||
// },
|
||
// destroyed() {
|
||
// localStorage.setItem('schedule', this.id)
|
||
// }
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
#one_e {
|
||
width: 100%;
|
||
margin-top: 27px;
|
||
margin-bottom: 60px;
|
||
padding-top: 27px;
|
||
}
|
||
|
||
#preview {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0%;
|
||
left: 0%;
|
||
z-index: 999;
|
||
|
||
.tc {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba($color: #000, $alpha: 0.58);
|
||
position: fixed;
|
||
top: 0%;
|
||
left: 0%;
|
||
}
|
||
|
||
.tc-text {
|
||
// width: 350px;
|
||
// width:100%;
|
||
padding: 30px;
|
||
box-sizing: border-box;
|
||
height: auto;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translateX(-50%) translateY(-50%);
|
||
|
||
a {
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fliter {
|
||
-webkit-filter: blur(10px);
|
||
-o-filter: blur(10px);
|
||
-moz-filter: blur(10px);
|
||
filter: blur(10px);
|
||
}
|
||
|
||
.wrapper {
|
||
min-width: 1280px;
|
||
box-sizing: border-box;
|
||
|
||
#box {
|
||
margin: 40px auto 0;
|
||
width: 1200px;
|
||
background-color: #ffffff;
|
||
padding: 35px 30px 100px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.boxx {
|
||
margin-top: 68px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.one-e {
|
||
width: 100%;
|
||
margin-top: 27px;
|
||
margin-bottom: 60px;
|
||
|
||
p {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 39px;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
|
||
span {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 39px;
|
||
letter-spacing: 0px;
|
||
color: #7471ef;
|
||
}
|
||
}
|
||
|
||
.one-o {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
margin-bottom: 60px;
|
||
|
||
ul {
|
||
width: 350px;
|
||
height: 674px;
|
||
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
|
||
border-radius: 5px;
|
||
padding: 30px 0 0 20px;
|
||
box-sizing: border-box;
|
||
|
||
li {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
margin-bottom: 28px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
h3 {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
h4 {
|
||
margin-top: 38px;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
h5 {
|
||
margin-top: 38px;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.bobb {
|
||
margin-top: 110px;
|
||
width: 100%;
|
||
height: 974px;
|
||
padding: 0 40px 0 11px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.left {
|
||
width: 419px;
|
||
height: 974px;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: flex-start;
|
||
|
||
.time {
|
||
width: 120px;
|
||
height: 734px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
margin-top: 72px;
|
||
|
||
.span {
|
||
display: inline-block;
|
||
width: 119px;
|
||
height: 18px;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 22px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.jdt {
|
||
width: 32px;
|
||
height: 974px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.sx0 {
|
||
width: 3px;
|
||
height: 79px;
|
||
}
|
||
|
||
.sx1 {
|
||
width: 3px;
|
||
height: 153px;
|
||
}
|
||
|
||
.wzx {
|
||
width: 20px;
|
||
height: 21px;
|
||
}
|
||
|
||
.zx {
|
||
width: 20px;
|
||
height: 21px;
|
||
}
|
||
}
|
||
|
||
.bb {
|
||
margin-top: 70px;
|
||
width: 180px;
|
||
height: 750px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.o {
|
||
padding-left: 5px;
|
||
box-sizing: border-box;
|
||
width: 170px;
|
||
height: 36px;
|
||
position: relative;
|
||
border-bottom: 2px solid #b0c3cd;
|
||
|
||
img {
|
||
width: 10px;
|
||
height: 10px;
|
||
position: absolute;
|
||
right: 0%;
|
||
bottom: -16%;
|
||
}
|
||
}
|
||
|
||
div {
|
||
padding-left: 5px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 36px;
|
||
position: relative;
|
||
border-bottom: 2px solid #b0c3cd;
|
||
|
||
img {
|
||
width: 10px;
|
||
height: 10px;
|
||
position: absolute;
|
||
right: 0%;
|
||
bottom: -16%;
|
||
}
|
||
|
||
section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
width: 132%;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
font-family: 'MicrosoftYaHei';
|
||
position: absolute;
|
||
left: -8%;
|
||
bottom: -100%;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
span {
|
||
display: inline-block;
|
||
width: 135px;
|
||
height: 22px;
|
||
text-align: center;
|
||
line-height: 22px;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 22px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
padding: 35px 30px;
|
||
box-sizing: border-box;
|
||
width: 535px;
|
||
height: 698px;
|
||
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
|
||
border-radius: 10px;
|
||
|
||
ul {
|
||
margin-top: 48px;
|
||
|
||
li {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 48px;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
p {
|
||
text-align: center;
|
||
width: 100%;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 24px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 31px;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 119px;
|
||
height: 95px;
|
||
position: absolute;
|
||
right: 0%;
|
||
top: 1%;
|
||
img {
|
||
width: 119px;
|
||
height: 95px;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
width: 1140px;
|
||
height: 38px;
|
||
border-bottom: 1px solid #ccc;
|
||
padding-left: 12px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.daochu {
|
||
width: 96px;
|
||
height: 32px;
|
||
background-image: linear-gradient(
|
||
69deg,
|
||
#cc263f 0%,
|
||
#f42b47 100%,
|
||
#ed162d 100%,
|
||
#e60012 100%
|
||
),
|
||
linear-gradient(#e60012, #e60012);
|
||
background-blend-mode: normal, normal;
|
||
border-radius: 4px;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.span {
|
||
span {
|
||
margin-right: 40px;
|
||
display: inline-block;
|
||
width: 120px;
|
||
height: 38px;
|
||
text-align: center;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
|
||
.style {
|
||
color: #e60012;
|
||
position: relative;
|
||
&::after {
|
||
content: '';
|
||
width: 120px;
|
||
height: 2px;
|
||
background-color: #e60012;
|
||
position: absolute;
|
||
bottom: 0%;
|
||
left: 0%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 80px;
|
||
}
|
||
}
|
||
</style>
|